CODEWITHSUNDEEP
htmlcss
M4DNE55
M4DNE55

Reputation: 49

Make a div go full opacity when another is hovered

I'm having a problem with this: http://jsfiddle.net/1904837j/

As you can see, when I hover over an image, the text that goes visible is the one under the next image.

What I want is have the text show up under the image being hovered over.

Here is the code:

HTML:

<div class="header">
    <div class="cats">
        <div class="adminmenu"><a href="ipban.php"><img src="<?php echo $host ?>/img/admin/ipban.png"></a><div class="undername">Test</div></div>
        <div class="adminmenu"><a href="ban.php"><img src="<?php echo $host ?>/img/admin/ban.png"></a><div class="undername">Test</div></div>
        <div class="adminmenu"><a href="smileys.php"><img src="<?php echo $host ?>/img/admin/smiley.png"></a><div class="undername">Test</div></div>
        <div class="adminmenu"><a href="setup.php"><img src="<?php echo $host ?>/img/admin/gear.png"></a><div class="undername">Test</div></div>
        <div class="adminmenu"><a href="forums.php"><img src="<?php echo $host ?>/img/admin/forums.png"></a><div class="undername">Test</div></div>
        <div class="adminmenu"><a href="adminlogoff.php"><img src="<?php echo $host ?>/img/admin/quit.png"></a><div class="undername">Test</div></div>
    </div>
</div>

CSS:

.header .cats{
    margin-top:15px;
    text-align:center;
}

.header img{
    margin-left:10px;
    margin-right:10px;
}

.adminmenu{
    display:inline-block;
}

.adminmenu:hover + .adminmenu .undername{
    opacity: 1;
    filter: alpha(opacity=100);
}

.adminmenu .undername{
    font-size: 10px;
    color:white;
    opacity: 0;
    filter: alpha(opacity=0);
}

Upvotes: 2

Views: 43

Answers (1)

Vucko
Vucko

Reputation: 20834

You're targeting .adminmenu child, so use:

.adminmenu:hover .undername{
    opacity: 1;
    filter: alpha(opacity=100);
}

JSFiddle

Explanation: with .adminmenu:hover + .adminmenu .undername you are targeting the next in level .adminmenu elements child element that has .undername class, and that's why in your fiddle it works for the next element.

Upvotes: 4

Related Questions