时间戳

首页 > 解决方案 > CSS 样式不影响子元素（按钮）

html - CSS 样式不影响子元素（按钮）

问题描述

现在，如果我将 inactiveLink 类添加到<a>它也会影响里面的按钮。他们不能再被点击了。我是否必须制作另一种样式activeLink来重新打开这些功能，或者有没有办法只影响<a>元素而不影响里面的按钮？

如果没有其他方法，默认cursor和pointer-events按钮是什么？

HTML

<a class="text-body selectable-element inactiveLink">
    [...]
    <button>Click</button>
</a>

CSS

a.inactiveLink {
    pointer-events: none;
    cursor: default;
}

标签： htmlcss

解决方案

虽然另一个答案会起作用（在我打字时它被删除了），但真正的问题是：如果你想要停用锚，是否真的应该在其中插入一个活动按钮？

随着站点/应用程序的扩展，其他开发人员会知道该类的作用吗？我认为 CSS 本身就很好，但是 HTML 可以移动，因此这些活动元素存在于非活动锚点之外（可能在共享父元素中）。值得深思！

如果您只想快速修复，请将“始终活动”类添加到按钮，并添加以下 CSS：

.always-active {
    cursor: auto;
    pointer-events: auto;
}


a.inactiveLink {
    pointer-events: none;
    cursor: default;
}
button.always-active {
    pointer-events: auto;
    cursor: auto;
}
<a class="text-body selectable-element inactiveLink">
    [...]
    <button class="always-active" onClick="alert('it works')">Click</button>
</a>

推荐阅读