Question

我不知道如何禁用悬停效果。我正在使用http://ink.sapo.pt/中的导航元素来获取我自己的自定义css。一切都很好，这意味着我能够像我想要的那样获得边框并将悬停效果放在边框上（当我将鼠标悬停在Home上时，边框从灰色变为红色）。但它仍在强调文本本身，我不希望这种情况发生在我的导航中。

        <nav className="ink-navigation">
            <ul className="menu horizontal">
                <li><a href="#"><span className="grey-dark bold underline-grey">Home</span></a></li>
                <li><a href="#"><span className="grey-dark bold underline-yellow">About</span></a></li>
            </ul>
        </nav>

悬停之前：

悬停后：

它在悬停期间强调的原因是因为我在我的.less中有这个：

@red: #C23033;

a:hover {
  color: #000000;
  text-decoration: underline;
}

.underline-grey {
  text-decoration: none;
  border-bottom: 3px solid @grey-xdark;
}

.underline-grey:hover {
  text-decoration: none;
  border-bottom: 3px solid @red;
}

但是我想要那个，因为我网站上的其他链接我仍然想要这种行为......它以黑色下划线徘徊。我只是不希望它为我的导航链接。不知道该怎么做..如何保持这个，然后在我的导航组件中禁用该文本修饰。

更新

有人建议我将样式移到我的标签上。但是，当我这样做时，它强调整个

，这不是我想要的，我只希望下划线的文字。因此，当我将其移至：

时，下划线太长了

Answer 1

尝试将您的课程放在<a>上，而不是孩子<span>：

<nav className="ink-navigation">
    <ul className="menu horizontal">
        <li><a href="#" className="grey-dark bold underline-grey">Home</a></li>
    </ul>
</nav>

Answer 2

使用CSS继承规则，并为您不想要下划线的实际锚元素定义更具体的规则：

HTML：

<nav className="ink-navigation">
    <ul className="menu horizontal">
        <li><a id="homeAnchor" href="#"><span className="grey-dark bold underline-grey">Home</span></a></li>
    </ul>
</nav>

CSS（我添加的内容）：

#homeAnchor a:hover { text-decoration: none; }

现在你的旧规则在任何地方都会起作用。

Answer 3

 .horizontal a:hover {
            text-decoration:none;

          }
 .horizontal a:hover .underline-grey {
   
         border-bottom: 3px solid @red;
   
          }

Answer 4

.ink-navigation a:hover {
  text-decoration:none;
}

.underline-grey {
  border-bottom: 3px solid @grey-xdark;
}

.underline-grey:hover {
  border-bottom: 3px solid @red;
}

覆盖父级悬停

4 个答案: