改變懸停框內的文本顏色

-1

所以現在自學自己的HTML和CSS，我有一個小問題。在我的菜單欄中，我有一些列表項，當鼠標懸停在框上時，我想要更改顏色，但我不確定如何執行此操作。現在我有：改變懸停框內的文本顏色

#Menu li:hover{ 
    background-color: rgba(255,165,0,0.5) 
} 

#Menu li a:hover{ 
    color: black; 
}

但是，這使得當我把鼠標懸停在文本上它改變，只有框改變。我試過了：

#Menu li:hover{ 
    background-color: rgba(255,165,0,0.5) 
    color: black; 
}

但是除了改變盒子的顏色，它什麼都不做。也有逐漸改變而不是突然改變也會很好。

#Menu { 
 
    height: 40px; 
 
    background-color: rgb(255,165,0); 
 

 
} 
 
#Menu ul{ 
 
    margin:auto; 
 
    padding:0; 
 
} 
 

 
#Menu li { 
 
    list-style-type: none; 
 
    float: left; 
 
    display: block; 
 
    width:20%; 
 
    height:40px; 
 
    text-align: center; 
 
    line-height:40px; 
 
    font-family: inherit; 
 
    font-size:16px; 
 
} 
 

 
#Menu li a{ 
 
    text-decoration: none; 
 
    color:white; 
 
    position: fixed; 
 

 
} 
 

 
#Menu li:hover { 
 
    background-color: #FFB733; 
 

 
} 
 

 
#Menu li a:hover { 
 
    color: black; 
 
}

<html> 
 
    <head> 
 
    <style type="text/css"> 
 
     body { 
 
     margin: 0; 
 
     } 
 
    </style> 
 
    </head> 
 
    
 
    <body> 
 
    <div id="Menu"> 
 
     <ul> 
 
     <li><a href="#">Cat</a></li> 
 
     <li><a href="#">Dog</a></li> 
 
     <li><a href="#">Mouse</a></li> 
 
     </ul> 
 
    </div> 
 
    </body> 
 
</html>

編輯：添加代碼片段

來源

2015-05-04 Flameancer

分享一個html樣本。 –

@Flameancer如果在'hover'上想要改變文字顏色，你必須像'#Menu li：hover a {color：red;}這樣編寫''這個代碼意味着當'懸停'在'li'上，'''錨點標籤也會生效。檢查演示。 http://jsbin.com/metihaneyu/1/edit –

#Menu li { 
    transition: 2s; 
} 

#Menu li:hover { 
    background-color: rgba(255,165,0,0.5); 
    color: red; 
}

見時懸停物品的盒子，不僅例如http://jsfiddle.net/k35rdfhp/1/

項改變背景顏色和顏色文本。

來源

2015-05-04 03:04:02

毫無疑問，這是有效的，因爲我剛剛嘗試過，但由於某種原因，它不適用於我，我不知道爲什麼？也嘗試了3個獨立的瀏覽器。 – Flameancer

@Flameancer有時頁面上的其他CSS代碼可能會產生干擾。如果任何屬性沒有生效，請嘗試在屬性值的末尾添加「！important」。 –

嘗試爲#Menu li:hover a指定顏色 - http://jsfiddle.net/k35rdfhp/2/

#Menu li a:hover, #Menu li:hover a { 
    color: black; 
}

來源

2015-05-04 03:37:00 ASR

我修改ASR的答案，並添加過渡到it.CSS3有內建的動畫不需要JavaScript或其他JS庫使用

#Menu li:hover { 
    background-color: #FFB733; 
    background: red; 
    transition-property: background; 
    transition-duration: 1s; 
    transition-timing-function: linear; 
}

http://jsfiddle.net/j863v3t7/

來源

2015-05-04 04:25:45 danidee

改變懸停框內的文本顏色

回答

相關問題