Geek Answers Handbook

How to show div on soaring image?

I have several nested divs and in one I got an image. If the user hovers the image, he should display a different interval (in the same wrapper).

html source:

<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 source:

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;
}

I prepared jsfiddle for testing: http://jsfiddle.net/mnx8agy0/

the image freezes, it should load the number.

Any idea on this?

+4
source share
3 answers

You can achieve this with the main selector to select a brother ~ .

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

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

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

+5
source

div:

div.one-third:hover span {
    display: block;
}
0
.team-about{display:none;}
div > a:hover + .team-about{display:block;}

I think this should work. Its pretty easy to use javascript instead

-1
source

More articles:


All Articles