文章/答案/技术大牛

发布

问覆盖父Hover
EN

Stack Overflow用户

提问于 2016-06-16 06:03:22

回答 4查看 362关注 0票数 2

我不知道如何禁用悬停效果。我正在使用来自http://ink.sapo.pt/的导航元素，使用我自己的自定义css。一切都很好，这意味着我可以得到我想要的边界，并在边界上悬停效果(边界从灰色变成红色，当我悬停在家)。但它仍然强调文本本身，我不希望这种情况发生在我的导航。

        <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>

悬停前：

在Hover之后：

它在悬停期间下划线的原因是因为我的.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;
}

但我想要，因为我的网站上的其他链接，我仍然希望这个behavior...that它徘徊与黑色下划线。我只是不想把它作为导航链接。不知道do..how要保留什么，然后禁用Nav组件中的文本装饰。

更新

有人建议我把样式移到我的标签上。但当我这么做的时候

这不是我想要的，我只想要加下划线的文字。所以当我把下划线移到：

css

回答 4

Stack Overflow用户

发布于 2016-06-16 06:07:45

尝试将类放在<a>上而不是子<span>上。

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

票数 0

Stack Overflow用户

发布于 2016-06-16 06:11:01

使用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; }

现在你的旧规则在任何地方都会同样有效。

票数 0

Stack Overflow用户

发布于 2016-06-16 06:12:56

 .horizontal a:hover {
            text-decoration:none;

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/37851063

复制

相似问题

问覆盖父Hover
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问覆盖父HoverEN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问覆盖父Hover
EN