css - 导航超链接仅在鼠标位于文本上时有效

Question

当我将鼠标悬停在上面时，我的导航按钮看起来有所不同，这是应该的，尽管直到我将鼠标悬停在不是我想要的文本上时指针光标才会出现。我希望用户被重定向，无论他们是在按钮上还是在其文本上。有什么问题吗？

这是按钮的 CSS:

.navButton {
    -moz-box-shadow: inset 0px 1px 0px 0px #916e50;
    -webkit-box-shadow: inset 0px 1px 0px 0px #916e50;
    box-shadow: inset 0px 1px 0px 0px #916e50;
    background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #c79e75), color-stop(1, #785634) );
    background: -moz-linear-gradient( center top, #c79e75 5%, #785634 100% );
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c79e75', endColorstr='#785634');
    background-color: #c79e75;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border: 1px solid #634b36;
    display: inline-block;
    color: #ffffff;
    font-family: arial;
    font-size: 15px;
    font-weight: bold;
    padding: 6px 0px;
    text-decoration: none;
    text-shadow: 1px 1px 0px #705439;
    text-align: center;
}
.navButton:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #785634), color-stop(1, #c79e75) );
    background:-moz-linear-gradient( center top, #785634 5%, #c79e75 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#785634', endColorstr='#c79e75');
    background-color:#785634;
}.navButton:active {
    position:relative;
    top:1px;
}

这是 html:

 <div id="nav">
         <ul>
          <li class="navButton">
          <a href="index.php">Home</a></li>
          <li class="navButton">
          <a href="guitar_bodies.php?page=1">Guitar 
          Bodies</a></li>
          <li class="navButton">
          <a href="guitar_pickguards.php?page=1">Guitar 
          Pickguards</a></li>
          <li class="navButton">
          <a href="contact_us.php">Contact Us</a></li>
        </ul>
      </div>

谢谢

Answer 1

您应该将这些样式应用到 .navButtona 而不是因为它们是超链接(但还要在 .navButton 上保留 display: inline-block > 对于他们的内联安排):

.navButton {
    display: inline-block;
}

.navButton a {
    /* ... */

    display: block; /* Replace inline-block with block */

    /* ... */
}

.navButton a:hover {
    /* ... */
}

.navButton a:active {
    /* ... */
}