使用 CSS 忽略 CSS :hover, :active, :focus 声明答案

【问题标题】：Ignoring CSS :hover, :active, :focus declarations with CSS使用 CSS 忽略 CSS :hover, :active, :focus 声明
【发布时间】：2012-04-30 23:13:21
【问题描述】：

我有几个链接，点击后会打开一个子菜单。这是通过我的样式表中的: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 css yui pseudo-class

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

使用 jQuery：

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

见this example。

没有 jQuery：

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

另见this example。

与 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');
});

另见this example。

【讨论】：

我在答案中添加了 YUI 版本。