Question

我花了几个小时想知道出了什么问题，摆弄了我在网上找到的答案却无法修复。我可以显示水平菜单，但li元素的颜色在悬停时不会改变。请帮忙。我刚刚开始研究一个新的网站项目并且是一个菜鸟。这是一个片段：

ul{
       line-style-type:none;  
       overflow:hidden;
       background-color:#333;
       margin:0;
       padding:0px 
       }
 
    li{
      float:right;
      }
    li a{
	    display:inline-block;
	    color:white;
	    padding:10px 10px;
	    text-decoration:none;
	    text-align:center;
	
        display:block;
    }
    li a: hover{
	    background-color:#223;
	    display:block;
	    position:relative;
     }

<ul>
    <li><a href="#l">About Me</a></li>
    <li><a href="#j">Blog</a></li>
    <li><a href="#k">Contact Me</a></li>
</ul>

Answer 1

如果您想要transition，我认为这仅适用于background-color，那么您需要在transition选择器上定义li a。

但是，您的:hover无效，而您需要a :hover，但需要a:hover

这是fiddle

<ul>
  <li><a href="#">Test 1</a></li>
  <li><a href="#">Test 2</a></li>
  <li><a href="#">Test 3</a></li>
</ul>

ul {
  list-style:none;  /* changed this as well, was incorrect */
  overflow: hidden;
  background-color: #333;
  margin: 0;
  padding: 0px;
}

li {
  float: right;
}

li a {
  /* you can also use "all", rather than specifying a specific transition, 
     however, when it's not needed, it's best to specify the actual 
     CSS to hit. If you have more than 1 transtion, you can break it up by
     using a comma, such as this: 
     transition: background-color .2s ease-in, color .2s ease-in; 
     Also do not forget to use prefixes for browsers (older), such as 
     -webkit-transition
     -moz-transition
     -ms-transition
     -o-transition
  */
  transition: background-color .2s ease-in; 
  display: inline-block;
  color: white;
  padding: 10px 10px;
  text-decoration: none;
  text-align: center;
  display: block;
}

li a:hover {
  background-color: #223;
  display: block;
  position: relative;
}

Answer 2

也请提供Html代码。但从我的角度来看问题可能就在这里

li { float: right; }

应该是

li { float: left; }

然后

li a: hover{
    background-color:#223;
    display:block;
    position:relative;
}

应该是li a:hover，a和:hover之间没有空格。

希望这有帮助。

Answer 3

用这个替换你的悬停类：

li a:hover{
            background-color:#223;
            display:block;
            position:relative;
         }

我只是删除了a和hover之间的空格

为什么这个css transistion菜单在Chrome中不起作用 - 水平菜单？

3 个答案: