Question

我对此有疑问：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);
}

Answer 1

您的目标是.adminmenu孩子，请使用：

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

JSFiddle

说明：对于.adminmenu:hover + .adminmenu .undername，您定位的是具有.adminmenu类的级别 .undername元素子元素中的下一个元素，这就是为什么在您的小提琴中< em>为工作。

当另一个人徘徊时，让div变得完全不透明

1 个答案: