html - 使div悬停时使div完全不透明

我对此有疑问：http://jsfiddle.net/1904837j/

如您所见，当我将鼠标悬停在图像上时，可见的文本就是下一张图像下的文本。

我想要的是将文本显示在悬停的图像下方。

这是代码：

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

最佳答案

您要定位.adminmenu儿童，因此请使用：

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

JSFiddle

说明：对于.adminmenu:hover + .adminmenu .undername，您将目标定位为具有.adminmenu类的下一个.undername元素子元素，这就是为什么在您的小提琴中它可用于下一个元素。