如果元素有类，是否可以在CSS中禁用悬停事件？

Question

如果元素具有类，是否可以在CSS中禁用悬停事件？

Answer 1

您可以使用:not()选择器：

.myElement {
    display: inline-block;
    padding: 10px;
    border-radius: 4px;
    background: #CADE75;
    text-decoration: none;
    color: #6D6D6D;
}

/* important bit */
.myElement:not(.dontHover):hover {
    background: #b5d335;
}

<a href="#" class="myElement">An element that hovers</a>
<a href="#" class="myElement dontHover">An element that doesn't</a>

Answer 2

您可以使用pointer-events: none，但这会禁用所有与指针相关的事件，包括点击。

a.class {
    pointer-events: none;
}

Answer 3

我想说最好的方法是使用2个班级。

对于html：

这样的东西

<div class="foo"> bar </div>
<div class="foo hoverClass"> foobar </div>

然后你可以拥有看起来像这样的CSS：

.foo {/* CSS here */}
.hoverClass:hover{/* CSS here */}

Here's示例的小提琴