使用 CSS 忽略 CSS :hover， :active， :focus 声明

Ignoring CSS :hover, :active, :focus declarations with CSS

本文关键字：CSS focus 声明 active hover 忽略 使用      更新时间：2023-09-26

我有几个链接，点击后会打开一个子菜单。这是通过在样式表中:hover、:focus和:active声明来实现的。

效果与此相同：http://www.cssplay.co.uk/menus/cssplay-click-flyout.html。

问题是，虽然CSS实现可以工作，但存在各种缺点，我想用JavaScript修复这些缺点。我正在使用 YUI 3.5.0 作为我的 JavaScript 库。是否可以使用 JavaScript 忽略样式表中的:hover、:focus和:active声明？

我知道我可以将这些声明放入一个单独的类中，并使用 JavaScript 更改元素的类，但这对我来说似乎不是很干净。

我知道我可以将这些声明放入一个单独的类中，并使用 JavaScript 更改元素的类，但这对我来说似乎不是很干净。

这就像它得到的那样干净。一个不太卫生的解决方案是复制通用规则中的样式并将它们直接注入到元素中。

我认为更改类的解决方案是最干净的，但只有例如您可以使用javascript覆盖悬停：

使用 jQuery：

$('#js').hover(
    function() { $(this).css('color', 'blue'); },
    function() { $(this).css('color', 'black'); }
);

请参阅此示例。

没有jQuery：

document.getElementById('js').onmouseenter = function() {
    this.style.color = 'blue';
}
document.getElementById('js').onmouseleave = function() {
    this.style.color = 'black';
}

另请参阅此示例。

与 YUI 一起：

Y.one('#js').on('mouseenter', function(e) {
    e.currentTarget.setStyle('color', '#00f');
});
Y.one('#js').on('mouseleave', function(e) {
    e.currentTarget.setStyle('color', '#000');
});

另请参阅此示例。

相关文章：