Question

我有以下方式设置4个div：

＆lt; 1st div＆gt; ＆lt; 2nd div＆gt;
＆lt; 3rd div＆gt; ＆lt; 4th div＆gt;

每当鼠标悬停在任何div上时，应该更改div背景。

我怎样才能做到这一点。也允许使用jQuery。感谢

Answer 1

您可以使用简单的CSS伪类:hover实现此目的：

div:hover{
    background:url('your_background_path')}

Answer 2

以下是使用 jQuery 的解决方案。

$('div').hover(function() {
   $(this).css({ backgroundImage: 'url(whatever.jpg)' });
}, function() {
   $(this).css({ backgroundImage: 'none' });
});

但是，如果我这样做，我会添加一个类并使用CSS来更改实际的背景图像。

您也可以使用纯JavaScript 来实现...

var divs = document.getElementsByTagName('div');

for (var i = 0, divsLength = divs.length; i < divsLength; i++) {
    divs[i].onmouseover(function() {
            divs[i].style.backgroundImage = 'url(whatever.jpg)';
        });

    divs[i].onmouseout(function() {
            divs[i].style.backgroundImage = 'none';
        });
}

你甚至可以只使用 CSS ......

div:hover {
    background-image: url(whatever.jpg);
}

Answer 3

假设那些只是4个div ...

<script type="text/javascript">
    $( document ).ready( function() {
       $( 'div' ).mouseover( function() {
          $( this ).css( 'background-color', 'red' );
       });
       $( 'div' ).mouseout( function() {
          $( this ).css( 'background-color', 'white' );
       });
    });
</script>

如果它们不是唯一的4个div，那么你需要研究jQuery选择器。也许给4个div一个特定的类名并引用它。

Answer 4

<script type="text/javascript">
    $(document).ready(function () {
        $('#div1').mouseover(function () {
            $(this).css('background-color', 'red');
        });
        $('#div2').mouseover(function () {
            $(this).css('background-color', 'green');
        });
        $('#div3').mouseover(function () {
            $(this).css('background-color', 'blue');
        });
        $('#div4').mouseover(function () {
            $(this).css('background-color', 'aqua');
        });
    });
</script>

Answer 5

如果您在悬停时需要四个不同的图像，您可以简单地给出四个不同的类或ID，这里我使用了id。 css例如

#firstdiv:hover{
background-image: url:('url');
}


#secondiv:hover{
    background-image: url:('url');
    }

同样保持两个。

div选择了问题

5 个答案: