0

我正在使用 JavaScript 制作一些可点击的 div。我想使用 CSS 让用户了解它们是可点击的，例如当鼠标进入 div 时更改 div 内链接的颜色。

在 CSS 中是：

#menu > div:hover > a {
    color: #f00;
}

它就像一个魅力。

我希望只有在启用 JavaScrpt 时鼠标悬停时链接的颜色才会改变，因为如果它被禁用，则 div 不可点击，只有链接是可点击的。我想用 javascript 添加这个声明，在 mootools 中应该很简单：

$$('#menu > div:hover > a').setStyle('color', '#f00');

但是该选择器不适用于 mootools。我应该去找它的diveach孩子。与简单的 css 定义相比，这对我来说似乎太多了。我怎样才能做到这一点？#menuaddEvents

替代解决方案（我不知道如何实现）可以编写一个with_js_enabled.css通过 javascript 加载。可能吗？

4

2 回答 2

3

更简单：在页面加载时在 body 元素上设置一个类：

document.body.className = "js";

然后修改你的CSS；

.js #menu > div:hover > a {
    color: #f00;
}

任务完成 ：-）

（虽然我假设您知道 IE 6 不支持 :hover 链接以外的任何内容？）

于 2009-08-04T10:44:02.050 回答
1

好吧，既然您在这里询问了mootools...

要在 div 上触发鼠标悬停时更改 #menu 的 div 中所有 A 的颜色，您可以定义一个类 a.red { color: red; }

$("menu").getElements("div").each(function(el) {
    el.addEvents({
        mouseenter: function() {
            this.getElements("a").addClass("red");
        },
        mouseleave: function() {
            this.getElements("a").removeClass("red");
        }
    });
});

您也可以使用 $("menu").getElements("div").getElements("a") 甚至 $("menu").getElements("a")，然后将事件附加到父级（如果恰好是 div) - 我想这真的没关系。

于 2009-08-05T13:21:42.940 回答