變化圖像和懸停附帶的文字

Question

我必須設計有兩個動作爲它的菜單欄鏈接

1）動作之前，其中的圖標爲綠色

2）懸停在圖標應更改爲它的活動版本

關於改變爲活動版本，I N讓文字也顯示出來。就像這樣：

我給這家目前的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是引導，而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: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:hover #about-text{ 
    color: rgba(0,0,0,1); 
} 

這將解決您的問題。