CSS悬停效果导航栏的高度

时间:2016-01-25 14:00:50

标签: html css css3

美好的一天, 我创建了一个带有各种链接的导航栏,我想使用悬停效果让它在悬停时改变颜色。问题是效果只是围绕单词而不是导航栏的高度到水平规则。我希望悬停效果达到水平规则。

这是我的代码:



ul{
    list-style-type: none;      
}

li{ 
    display:inline;
    padding-right: 50px;
}

#NavBar ul li a{
    display: inline-block;
    text-decoration: none;
    cursor: pointer;    
}

#NavBar ul li a:hover{
 background-color: yellow;
 }

<hr>
<nav id="NavBar">
  <ul>
    <li><a>Home</a></li>
    <li><a>History</a></li>
    <li><a>Gallery</a></li>
    <li><a>Techniques</a></li>  
  </ul>       
</nav>
<hr>
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分:2)

&#13;
&#13;
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  border: solid silver;
  border-width: 1px 0;
  text-align: center;
}

nav li{ 
  display: inline-block;
  margin: 0;
  padding: 0;
}

nav a {
  display: block;
  text-decoration: none;
  cursor: pointer;
  padding: 1em;
}

nav a:hover {
  background-color: yellow;
}
&#13;
<nav>
  <ul>
    <li>
      <a>Home</a>
    </li><li>
      <a>History</a>
    </li><li>
      <a>Gallery</a>
    </li><li>
      <a>Techniques</a>
    </li>  
  </ul>       
</nav>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

CSS选择器仅突出显示单词,因为a是目标。如果您使用a更改li,则会突出显示li的整个区域。

Repalce:

#NavBar ul li a:hover{
 background-color: yellow;
 }

使用:

#NavBar ul li:hover{
 background-color: yellow;
 }

答案 2 :(得分:0)

试试这个

li:hover {

background-color: yellow;
}