改变悬停框内的文本颜色

-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

改变悬停框内的文本颜色

回答

相关问题