如何在悬停图像上显示div?

问题描述

我有一些嵌套的div，有一个我得到了一张图片.如果用户将鼠标悬停在图像上，它将显示另一个跨度(在同一包装中).

I have some nested div and in one i got an image.If the user hovers the image it should display another span (in the same wrapper).

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/

I prepared a jsfiddle to test: http://jsfiddle.net/mnx8agy0/

将鼠标悬停在图片上会加载数字跨度.

hovering the image it should load the number span.

有什么想法吗?

推荐答案

您可以通过通用兄弟选择器 〜.

http://jsfiddle.net/mnx8agy0/1/

div > a:hover ~ .team-about .number {display:block;}

请在评论中解释降票.这是唯一可行的解​​决方案.

Please do explain downvotes in a comment. This is the only solution provided that works.

这篇关于如何在悬停图像上显示div?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！