使用下面的标记,当鼠标悬停在按钮上时,按钮文本将带下划线.我怎样才能摆脱这种行为?

是否有更好的方法将链接添加到 bootstrap 中的BTN组以避免此行为?

<a href="#">
    <div class="btn-group">
        <button class="btn">Text</button>
        <button class="btn">Text</button>
    </div>
</a>

测试的CSS行:

a:hover .btn-group { text-decoration: none }
a .btn-group:hover { text-decoration: none }
a:hover .btn-group .btn { text-decoration: none }
a .btn-group .btn:hover { text-decoration: none }

任何额外的!重要信息也不起作用(由baptme建议).

推荐答案

{ text-decoration: none !important}


EDIT 1:

例如,只有a{text-decoration: none}个有效

您可以使用一个类来不干扰<a>个标记的默认行为.

<a href="#" class="nounderline">
  <div class="btn-group">
    <button class="btn">Text</button>
    <button class="btn">Text</button>
  </div>
</a>

CSS:

.nounderline {
  text-decoration: none !important
}

Css相关问答推荐

悬停时可展开的按钮与屏幕右侧对齐,如何保持未悬停的按钮正确对齐?

以百分比形式输入的css宽度属性不会生效

使用 Flex 容器,如何在右对齐所有 Flex 子项的同时赋予子图像完整宽度?

如何在不使用 sx props 的情况下从 Select 样式中定位 mui paper 组件?

测试响应式设计:手动拖动浏览器窗口与使用设备工具栏

使元素不水平滚动

flex-wrap 导致 children 身高加倍

有没有办法将px单位添加到 Sass mixin 的参数数组中?

2 列 UL,右列中的列表项数量为奇数?

带有 flex 的 CSS 空 div 以扩展并保持纵横比

react 样式的条件类名称设置

如何让我的 CSS 代码响应小屏幕?

使用 node-sass 在压缩文件末尾添加 min.css 文件扩展名

当我在几个月之间更改时,有什么方法可以在react-dates-range上添加淡入淡出或幻灯片效果?

最大宽度与最小宽度

在 Vuejs 中拥有全局 CSS 的最佳方式

我应该如何组织我的 CSS 文件的内容?

为什么我的 div 边距重叠,我该如何解决?

Rails 中正确的 SCSS assets资源 struct

100% 高度减go 标题?