导航超链接仅在鼠标在文本上时工作 [英] Navigation hyperlinks only work when mouse is on the text

问题描述

我的导航按钮看起来不同，当我的鼠标结束，因为它应该，虽然指针光标不会出现，直到我的鼠标在文本，这不是我想要的。我希望用户被重定向，不管他们是在按钮或其文本。

My navigation button looks different when I mouse over, as it should, though the pointer cursor does not appear until I mouse over the text which is not what I want. I want the user to be redirected regardless of whether they are on the button or its text. What could be wrong?

这是按钮的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>

感谢

推荐答案

您应该将这些样式应用于 .navButton a ，而不是超链接（但也保留 display：inline-block .navButton ：

You should apply these styles to .navButton a instead as those are the hyperlinks (but also keep display: inline-block on .navButton for their inline arrangement):

.navButton {
    display: inline-block;
}

.navButton a {
    /* ... */

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

    /* ... */
}

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

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

这篇关于导航超链接仅在鼠标在文本上时工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！