var div = document.getElementById( 'div_id' );
div.onmouseover = function() {
  this.style.backgroundColor = 'green';
  var h2s = this.getElementsByTagName( 'h2' );
  h2s[0].style.backgroundColor = 'blue';
};
div.onmouseout = function() {
  this.style.backgroundColor = 'transparent';
  var h2s = this.getElementsByTagName( 'h2' );
  h2s[0].style.backgroundColor = 'transparent';
};

在代码中添加/更改元素的样式是一种不好的做法。今天你想改变背景颜色，明天你想改变背景图像，明天你决定改变边框也很好。

每次只因为设计需求变化而编辑代码是一种痛苦。另外，如果你的项目会增长，更改js文件会更加痛苦。更多的代码，更多的痛苦。

尽量避免使用硬编码样式，这将节省您的时间，如果您做得对，您可以要求为其他人执行“更改颜色”任务。

因此，您可以在节点上添加/删除 CSS 类，而不是更改样式的直接属性。在您的特定情况下，您只需要为父节点执行此操作 - “div”，然后通过 CSS 设置子节点的样式。因此无需将特定的样式属性应用于 DIV 和 H2。

再推荐一个点。尽量不要连接硬编码的节点，而是使用一些语义来做到这一点。例如：“向所有具有‘内容’类的节点添加事件。

总之，这是我将用于此类任务的代码：

//for adding a css class
function onOver(node){
   node.className = node.className + ' Hover';
}

//for removing a css class
function onOut(node){
    node.className = node.className.replace('Hover','');
}

function connect(node,event,fnc){
    if(node.addEventListener){
        node.addEventListener(event.substring(2,event.length),function(){
            fnc(node);
        },false);
    }else if(node.attachEvent){
        node.attachEvent(event,function(){
            fnc(node);
        });
    }
}

// run this one when window is loaded
var divs = document.getElementsByTagName("div");
for(var i=0,div;div =divs[i];i++){
    if(div.className.match('content')){
        connect(div,'onmouseover',onOver);
        connect(div,'onmouseout',onOut);
    }
}

而你的 CSS 应该是这样的：

.content {
    background-color: blue;
}

.content.Hover{
    background-color: red;
}

.content.Hover h2{
    background-color : yellow;
}

通过 DOM 访问要更改的元素，例如在事件处理程序中使用document.getElementById()或通过this，并更改该元素中的样式：

document.getElementById("MyHeader").style.backgroundColor='red';

编辑

您也可以使用getElementsByTagName，（未经测试）示例：

function colorElementAndH2(elem, colorElem, colorH2) {
    // change element background color
    elem.style.backgroundColor = colorElem;
    // color first contained h2
    var h2s = elem.getElementsByTagName("h2");
    if (h2s.length > 0)
    {
        hs2[0].style.backgroundColor = colorH2;
    }
}

// add event handlers when complete document has been loaded
window.onload = function() {
    // add to _all_ divs (not sure if this is what you want though)
    var elems = document.getElementsByTagName("div");
    for(i = 0; i < elems.length; ++i)
    {
        elems[i].onmouseover = function() { colorElementAndH2(this, 'red', 'blue'); }
        elems[i].onmouseout = function() { colorElementAndH2(this, 'transparent', 'transparent'); }
    }
}

<script type="text/javascript">
 function enter(elem){
     elem.style.backgroundColor = '#FF0000';
 }

 function leave(elem){
     elem.style.backgroundColor = '#FFFFFF';
 }
</script>
 <div onmouseover="enter(this)" onmouseout="leave(this)">
       Some Text
 </div>

这个可能有点奇怪，因为我真的不是一个认真的程序员，而且我在编程中发现了青霉素的发明方式 - 纯粹是意外。那么如何在鼠标悬停时更改元素？:hover像使用a元素一样使用属性。

例子：

div.classname:hover
{
    background-color: black;
}

这将更改任何div类，classname使其在鼠标悬停时具有黑色背景。您基本上可以更改任何属性。在 IE 和 Firefox 中测试

编程快乐！