这个问题已经在这里有了答案:

我不确定这是否可能是由于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;
 }
}

#1楼 票数:0

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

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

#2楼 票数:0

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

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

#3楼 票数:0

您需要一些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;
 }
}

  ask by snw123 translate from so

未解决问题?本站智能推荐:

3回复

下划线扩展到单词尾部,并带有字母间距[关闭]

我正在开发一个WordPress网站,并通过添加letter-spacing: 4px;来增加网站导航栏上的letter-spacing: 4px; 到位于主题style.css文件中的#mainNav ID网站。 我还添加了text-decoration: underline; 放在以下
3回复

选择哪个类别来删除URL下划线?

我试图在悬停事件中从URL删除下划线,但是无法弄清楚哪个class / CSS规则正在影响div。 页面底部是“相关帖子”部分,当光标悬停在图像/文章标题上方时,标题会带有下划线。 我要删除下划线的CSS规则是text-decoration:none 该问题的一个示例可以在本页底部
2回复

链接下划线不会消失

我正在为WordPress编写插件,当我添加链接时,下划线不会消失。 . 我使用的主题是 这是我的html: 我很惊讶这行不通,因为text-decoration甚至是内联的。 我也将其包含在CSS中: 我什至包含了主题开发人员的代码( https://wordpress.
1回复

如何在WordPress中将带有图片的帖子导航链接居中? [关闭]

我正在建立自己的WordPress主题,并且确实在努力使导航正确。 我有两个图像(“左/旧”箭头和“右/较新”箭头),我想代表分别显示较旧或较新帖子的链接。 链接将立即显示在当前显示的最后一个帖子的下方。 如果没有较新的帖子(即我们在首页上),我只想显示一个“较旧”箭头链接,该链接
2回复

如何在响应菜单上的导航链接上的悬停上设置下划线?

我已经为导航菜单上的悬停下划线编码,效果很好。 但是,当我创建一个响应式导航菜单时,悬停时的下划线会覆盖块的整个宽度,而不是导航链接,就像浏览器大于600像素时一样。 这是该网站 ,或者您可以参考以下代码段。 任何帮助表示赞赏。 function myFunctio
2回复

CSS-导航标签在Safari中带有下划线

导航栏上的<a>标记带有一个链接下划线,仅在Safari上显示。 我如何摆脱它? 我已经有了text-decoration: none; 应该将其删除,但不能删除。 以前从未见过- 紫色线是边框的底部,它是我需要删除的黑色立即下划线。 这是我目前的代码-
2回复

动画锚链接-WordPress的[重复]

这个问题已经在这里有了答案: 如何使用jQuery上下滚动页面至锚点? 13个答案 jQuery滚动到元素 29个答案 我在Wordpress网站中设置了一个锚链接,该链接从导航到页脚。 HTML-footer.php 选择链接时,页
1回复

WordPress中带有超链接的奇怪链接错误

当我单击重定向到WooCommerce的“主要商店”页面的链接时,出现空白页面,没有产品。 (请参见ПРОДУКТИ上方右上方栏中的链接ПРОДУКТИ ) 当您从主菜单中单击按钮时,确定(按钮: ПРОДУКТИ )。 我禁用了所有插件并更改了主题,但是没有运气! 在此处查