Question

所以现在自我教我自己的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;
}

但除了更改框颜色外什么也没做。同样地，逐渐改变而不是突然改变也会很好。

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

编辑：添加了代码段

Answer 1

#Menu li {
    transition: 2s;
}

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

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

当悬停项目框时，项目会更改背景颜色和颜色，而不仅仅是文本。

Answer 2

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

指定颜色

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

Answer 3

我修改了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/

在悬停时更改框内的文字颜色

3 个答案: