如何在鼠标悬停时更改div背景图像 [英] how to change the div background image in mouse over

问题描述

可能重复:
有什么办法吗悬停在一个元素上并影响另一个元素?

如何更改div背景图像，使用css 在

上将鼠标悬停在另一个div上.

解决方案

使用您提供的标记，仅使用CSS确实可以实现:

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

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

  a:hover div{背景图片:url(http://placehold.it/400x400);} 

当锚点悬停时，这将更改div的背景.这并非在所有情况下都有效，您必须了解元素之间的关系并使用适当的选择器.如果元素没有关系，则必须使用Javascript(或其其中一个库).

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

Possible Duplicate:
Is there any way to hover over one element and effect a different element?

How to change the div background image,in mouse over the another div,using css .

解决方案

With the markup you supplied, this is indeed possible with CSS alone:

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

You can use the :hover pseudo selector to select the div when the anchor has been hovered

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

This will change the div's background when the anchor is hovered. This doesn't work in all cases, you must be aware of the relationship of the elements and use the appropriate selector. If the elements have no relationship, you will have to use Javascript (or one of its libraries.)

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

这篇关于如何在鼠标悬停时更改div背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！