html 移除hover事件,从元素中删除'：hover'CSS行为

当您将鼠标悬停在某个元素上时，我的CSS会更改格式。

HTML：

CSS：.test:hover { border: 1px solid red; }

在某些情况下，我不希望将CSS应用于悬停。 一种方法是使用jQuery从div中删除CSS类，但这会破坏其他的东西，因为我也使用该类来格式化其子元素。

所以这让我质疑：有没有办法从元素中删除'悬停'CSS样式？

我会用两个班。 保留你的测试类并添加一个名为testhover的第二个类，它只添加到那些你想要悬停的类中 - 与测试类一起。 这不是直接问你的问题，但没有更多的上下文感觉是最好的解决方案，可能是最干净和最简单的方法。

例：

HTML：

CSS：.test { border: 0px; }

.testhover:hover { border: 1px solid red; }

使用:not伪类来排除不希望悬停的类应用于：

小提琴

.test:not(.nohover):hover {

border: 1px solid red;

}

这就是你想在一个CSS规则！

一种方法是添加：pointer-events:none;

到您要禁用悬停的元素。

(注意：这也会禁用该元素上的JavaScript事件，点击事件实际上会落在后面的元素上)。

浏览器支持(截至2011年3月21日，95.13％)

这似乎更清洁

/**

* This allows you to disable hover events for any elements

*/

.disabled {

pointer-events: none; /**

opacity: 0.2;

}

.button {

border-radius: 30px;

padding: 10px 15px;

border: 2px solid #000;

color: #FFF;

background: #2D2D2D;

text-shadow: 1px 1px 0px #000;

cursor: pointer;

display: inline-block;

margin: 10px;

}

.button-red:hover {

background: red;

}

.button-green:hover {

background:green;

}

链接地址: http://www.djcxy.com/p/88029.html