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

您应该将这些样式应用于.navButton a，而不是那些超链接（但display: inline-block保留.navButton以进行内联排列）：

.navButton {
    display: inline-block;
}

.navButton a {
    /* ... */

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

    /* ... */
}

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

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

Answer 2

只需将cursor:pointer添加到.navButton:hover课程即可这是一个更新的小提琴：http://jsfiddle.net/mrchief/7SV5K/

这将解决您的风格问题。但是，要点击按钮，您需要为click添加li处理程序。

导航超链接仅在鼠标位于文本上时才起作用

2 个答案: