Question

我不确定这是否可能是由于php / wordpress，但我有一个导航栏，我刚刚意识到当你点击它保持下划线的链接，直到你再次悬停它？对我来说似乎很奇怪我从来没有发生这种情况，也无法解决为什么......

<nav>
   <ul>
      <li><a href="#"><img src=" " height="10%" width="10%"/>Link 1</a></li>

      <li><a href="#"><img src=" " height="10%" width="10%"/><a href="#">Link 2</a></li>

      <li><a href="#"><img src="" height="10%" width="10%"/><a href="#">Link 3</a></li>
   </ul>
</nav>

SCSS ..

nav {
  margin: 0px;
  background-color: $nav_bgcolor;
  box-shadow: $nav_shadow;

   ul {
    color: #979797;
    padding: 0px;
    display: table;
    width: 100%;
    padding: 15px;
    margin: 0px;
    text-align: center;
  }
   ul li {
    list-style-type: none;
    display: inline-block;
    width: 30%;
  }
   ul li a {
    color: $font_color;
  }
   ul li a:hover {
    cursor: pointer;
    color: $hover;
  }
   a, a:visited, a:active, a:visited, a:focus, a:hover {
    text-decoration: none !important;
 }
}

Answer 1

将您的“ul li a”更改为：

nav ul li a {
color: $font_color;
text-decoration: none;
}

Answer 2

上面的代码在解决我遇到的问题时实际上是正确的。问题正在发生，因为它没有更新我的任何代码，因为浏览器缓存了网站。谢谢大家的帮助

注意：删除浏览器历史记录!!

Answer 3

您需要一些HTML修复程序。您在anchor标记内使用了anchor标记。

HTML

<nav>
   <ul>
      <li>
        <a href="#">
          <img src="" height="10%" width="10%"/>Link 1
        </a>
      </li>

      <li>
        <a href="#">
          <img src="" height="10%" width="10%"/>Link 2
        </a>
       </li>

      <li>
        <a href="#">
          <img src="" height="10%" width="10%"/>Link 3
        </a>
      </li>
   </ul>
</nav>

CSS

/*Random colors use your colors here*/
$nav_bgcolor:red;
$nav_shadow:black;
$font-color:white;
$hover:green;

/*Random colors use your colors here*/

nav {
  margin: 0px;
  background-color: $nav_bgcolor;
  box-shadow: $nav_shadow;

   ul {
    color: #979797;
    padding: 0px;
    display: table;
    width: 100%;
    padding: 15px;
    margin: 0px;
    text-align: center;
  }
   ul li {
    list-style-type: none;
    display: inline-block;
    width: 30%;
  }
   ul li a {
    color: $font_color;
    text-decoration:none;
  }
   ul li a:hover {
    cursor: pointer;
    color: $hover;
  }
   a, a:visited, a:active, a:visited, a:focus, a:hover {
    text-decoration: none !important;
 }
}

为什么我的导航链接仍有下划线？即使有！重要声明

3 个答案: