Question

我有DIV1，当用户onmouserover它，我想改变DIV2的背景（网页的不同部分），请问怎么做？当用户登上DIV1时，那么DIV2应该恢复原状。

感谢。

Answer 1

您也可以使用CSS和常规兄弟选择器（~）或其他选择器的组合来指定要更改的div。

.one:hover ~ .two {background:salmon;}

或

.one:hover ~ ul .three {background: lightblue;}

Demo

Answer 2

以下是如何在纯JavaScript中绑定鼠标事件。

document.getElementById('XYZ').onmouseover = function(){
    //Do stuff here
}

div div改变了mouseover上另一个{{1}}的CSS属性。{/ p>

Answer 3

让我们说你有这个HTML

<div class="div1"></div>
<div class="div2"></div>

这个css：

 .div2 {
    background: #FFF url(/path/to/mouseOUTImage) top left no-repeat;
 }
 .div2MouseOver {
    background: #FFF url(/path/to/mouseOVERImage) top left no-repeat;
 }

然后使用jQuery，你可以这样做：

$('.div1')
.mouseenter(function() {
  $('.div2').addClass('div2MouseOver');
})
. mouseleave(function() {
  $('.div2').removeClass('div2MouseOver');
});

Answer 4

我尝试使用普通的JS来实现你需要的东西，

DEMO

(function () {

    //change the value of div1 with your first div box
    var div1 = document.getElementById('div1'); 
    var div2 = document.getElementById('div2');
    var defBC = div2.style.backgroundColor;

    addEventHandler(div1, 'mouseover', function () {
        div2.style.backgroundColor= 'black';
    });

    addEventHandler(div1, 'mouseout', function () {
        div2.style.backgroundColor= defBC;
    });


    function addEventHandler(el, eType, handler) {
        if (el.addEventListener) { // W3C, FF  
            el.addEventListener(eType, handler, false);
        } else if (el.attachEvent) { // IE  
            el.attachEvent('on' + eType, function() {
                handler.call(el);
            });
        }
    }

})();

Answer 5

如果您接受使用jQuery，它将是这样的：

var bgcolor;
$("#id_of_first_div").hover(function(){
      bgcolor = $("#id_of_div_2").css('backgroundColor');
      $("#id_of_div_2").css('backgroundColor', '#ffcc00'); 
   },
   function(){
      $("#id_of_div_2").css('backgroundColor', bgcolor);
});

当onmouseover另一个div时更改div背景

5 个答案: