我有一些嵌套的div，在其中一个中，我得到了一个图像。如果用户将图像悬停，它应该显示另一个跨度（在同一包装中）。
html来源：
<div class="columns one-third">
<a href="#">
<img src="http://fc02.deviantart.net/fs70/i/2013/088/7/2/transformers_gold_icon_by_slamiticon-d5z7dqs.png" alt="Jack Sparrow" width="250px">
</a>
<div class="team-name"><h5>Jack Sparrow</h5><span></span></div>
<div class="team-about"><p><span class="slug">Chief Executive Officer / CEO</span><span class="number">#97</span></p></div>
CSS来源：
div>a>img {
filter: url(/filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
}
div>a>img:hover {
filter: none;
-webkit-filter: grayscale(0);
display:block;
}
div.team-about .slug{
float:left;
}
div.team-about .number{
float:right;
margin: -10px 10px auto;
font-size: 28px;
display: none;
}
我准备了一个jsfiddle进行测试：http : //jsfiddle.net/mnx8agy0/
将鼠标悬停在图像上应加载数字跨度。
有什么想法吗？
您可以使用常规的同级选择器 来实现~。
http://jsfiddle.net/mnx8agy0/1/
div > a:hover ~ .team-about .number {display:block;}
请在评论中解释降票。这是唯一可行的解决方案。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句