Question

当我将鼠标悬停在导航栏的文本上方时，文本上方的空格会突出显示而不是文本本身。我的CSS代码如下：

ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: silver;
}

li a {
display: block;    
padding: 8px 16px;
text-decoration: none;
}

/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}

我的HTML代码如下：

 <ul>
  <li><a href=""></a> Home</li>
    <li><a href=""></a>Contact</li>
    <li> <a href=""></a>Gallery</li>        
  </ul>

Answer 1

首先看看你的锚链接，你在它们中犯了一个错误，在它们之间放置一个链接文本。第二个将悬停规则应用于li而不是li a：

＆＃13;

ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: silver;
}

li a {
display: block;    
padding: 8px 16px;
text-decoration: none;
}

/* Change the link color on hover */
li:hover {
background-color: #555;
color: white;
}

＆＃13;

<ul>
  <li>
    <a href="#"> Home</a></li>
  <li>
    <a href="#">Contact</a></li>
  <li>
    <a href="#">Gallery</a></li>
</ul>

＆＃13;

Answer 2

＆＃13;

ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: silver;
}

li a {
display: block;    
padding: 8px 16px;
text-decoration: none;
}

/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}

＆＃13;

 <ul>
  <li><a href="">Home</a> </li>
    <li><a href="">Contact</a></li>
    <li> <a href="">Gallery</a></li>        
  </ul>

＆＃13;

在a标记中添加文字，以使链接可以点击 - 并获得所需的结果

Answer 3

我检查了您的代码，发现问题出在您的HTML代码中。试试这个。

      <ul>
         <li><a href="">Home</a></li>
        <li><a href="">Contact</a></li>
        <li> <a href="">Gallery</a></li>        
     </ul>

当您将<a>元素悬停时，文字应位于<a>标记内。

Answer 4

只需将li a:hover更改为li:hover

即可

    ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: silver;
    }

    li a {
    display: block;    
    padding: 8px 16px;
    text-decoration: none;
    }

    /* Change the link color on hover */
    li:hover {
    background-color: #555;
    color: white;
    }

<ul>
  <li><a href=""></a> Home</li>
    <li><a href=""></a>Contact</li>
    <li> <a href=""></a>Gallery</li>        
  </ul>

将鼠标悬停在导航栏列表上时不突出显示文本

4 个答案: