在悬停的盒子内更改文本颜色

所以现在就自我教育自己，所以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>

编辑：添加了代码段

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

请参阅示例http://jsfiddle.net/k35rdfhp/1/

项目会更改背景色和颜色，而不仅仅是文本的盒子。

尝试为#Menu li:hover a -http://jsfiddle.net/k35rdfhp/2/

尝试指定颜色。

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

i修改了ASR的答案，并添加了向其添加过渡。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/

相关内容

最新更新

热门标签：