在悬停时更改图像和随附文本

Question

我必须设计一个菜单栏，它的链接有两个动作

1）在图标为绿色的操作之前

2）悬停时，图标应更改为活动版

在更改为活动版本时，我还需要显示文本。像这样：

我目前的HTML是：

<div class="span1 but">
    <a href="#">
    <div class="image-holder" id="about">

    </div>
    <div class="text-menu" id="about-text">
        About
    </div>
</a>
</div>

span1来自Bootstrap，而but是css类，如下所示：

.but{
height:70px;
}

ID #about定义为：

#about{
background:url('../img/about-green.png') no-repeat;
background-size: 60px 60px;
}
#about:hover{
background:url('../img/about-active.png') no-repeat;
background-size: 60px 60px; 
}

我目前的问题是，在悬停时，我希望文字也出现。其文本框定义为：

.text-menu{
text-align: center;
margin-top: -10px;
text-decoration: none;
color: rgba(255,255,255,0);
}

ID＃about-text是：

#about-text:hover{
color: rgba(0,0,0,1);
}

如何使文字与图片一起显示在悬停上？

Answer 1

请尝试以下操作。

#about-text{
    display: none;
}

#about:hover #about-text{
    display: block;
}

这使用display：none;隐藏文字，但如果你将鼠标悬停在#about上，它会显示文字。

您也可以试试这个。

.text-menu{
    display: none;
}

.image-holder:hover .text-menu{
    display: block;

Answer 2

您可以使用visibility属性

.text-menu{
 visibility:hidden
}

.text-menu:hover{
 visibility:visible
}

Answer 3

您必须先更改HTML才能解决问题。

<div class="image-holder" id="about">
 <div class="text-menu" id="about-text">
    About
</div>
</div>

现在添加css，而不是“＃about-text：hover”

#about:hover #about-text{
  color: rgba(0,0,0,1);
}

这将解决您的问题。