Question

可能重复：
Is there any way to hover over one element and effect a different element?

如何更改div背景图片，鼠标悬停在另一个div上，使用css 。

Answer 1

虽然有更好的方法可以实现这一点，但是使用sprite和background-position可以实现这一目标。但是：

您的HTML

<a class="selector">My Link</a>

你的CSS

.selector {
    background-image:url(myImage.jpg);
}

.selector:hover {
    background-image:url(myHoverImage.jpg);
}

Jquery解决方案

HTML

<a class="selector" data-type="bgChanger1">
    My Link
</a>

<div data-type="bgChanger1">
    ...
</div>

JQUERY

$(document).ready(function()
{
    var hoverElement = $('.selector'),

        dataType = hoverElement.attr('data-type'),

        linkedDiv  = $('div[data-type="' + data-type + '"]');

    hoverElement.hover(function(e)
    {
        e.preventDefault()

        linkedDiv.css('background-image', 'hoverImage.jps');
    },
    {
        linkedDiv.css('background-image', 'normalImage.jpg');
    });
});

Answer 2

使用您提供的标记，仅使用CSS就可以实现这一点：

<a>
    <img src="http://placehold.it/100x100" /> 
    <div> 
    </div>
</a>

您可以使用:hover伪选择器在悬停锚点时选择div

a:hover div
{
    background-image: url(http://placehold.it/400x400);
}

当锚点悬停时，这将改变div的背景。这并不适用于所有情况，您必须了解元素的关系并使用适当的选择器。如果元素没有关系，则必须使用Javascript（或其中一个库。）

http://jsfiddle.net/Kyle_Sevenoaks/fPGU3/

Answer 3

您可以使用jquery执行此操作。

您的加价：

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

你的剧本：

$("#div1").mouseover( function() {
   $("#div2").css("background-image", "url('image.png')");
});

Answer 4

只需添加一个jquery脚本，如下所示：

 $(document).ready(function() {
    $('#div1').hover(function(){
      $('#div2').css("background","url(image_url)");
    });
 });

如何在鼠标上更改div背景图像

4 个答案: