2

可能重复：
有没有办法将鼠标悬停在一个元素上并影响另一个元素？

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

4

4 回答 4

2

这将实现您正在寻找的东西，尽管有更好的方法可以做到这一点，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>

查询

$(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');
    });
});
于 2012-09-19T07:17:48.600 回答
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/

于 2012-09-19T07:45:45.113 回答
1

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

您的标记：

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

你的脚本：

$("#div1").mouseover( function() {
   $("#div2").css("background-image", "url('image.png')");
});
于 2012-09-19T07:29:51.397 回答
0

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

 $(document).ready(function() {
    $('#div1').hover(function(){
      $('#div2').css("background","url(image_url)");
    });
 });
于 2012-09-19T07:52:19.253 回答