1

我有几个链接，点击后会打开一个子菜单。这是通过我的样式表中的 、 和 声明: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 更改元素的类，但它对我来说似乎不是很干净。

4

2 回答 2

1

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

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

于 2012-04-30T06:37:04.487 回答
1

我认为更改类的解决方案是最干净的，但仅举例来说，您可以使用 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');
});

另请参阅此示例。

于 2012-04-30T06:53:56.157 回答