Html 复杂的css活动案例，几乎在IE中也可以使用（JSFIDLE内部）

我正在尝试制作一个由几层组成的按钮。最后一层应该是可点击的层，点击可以控制上一层的颜色

这在除IE和“active”之外的所有4种主要浏览器中都有效。我如何让它在IE中工作

jsfiddle在这里->

我这样做是因为我希望整个区域都可以点击，它不应该有盲点

<div class = "div1">
    <div class = "div2">        
    </div>
</div>

.div2
{
width: 100%;
height: 100%;
background-color: black;
}

.div1
{
position: absolute;
width: 350px;
height: 100px;
}
.div1:hover .div2 {background-color:yellow;}        
.div1:active .div2 {background-color: grey;}

.第2分部
{
宽度：100%；
身高：100%；
背景色：黑色；
}
.1分部
{
位置：绝对位置；
宽度：350px；
高度：100px；
}
.div1:hover.div2{背景色：黄色；}
.div1:活动.div2{背景色：灰色；}

根据：

IE 8-10（可能还有更老的）有一个小错误：在嵌套元素上单击鼠标不会触发：active

IE7更糟糕

您可以使用JavaScript模拟：活动行为：

替换

.div1:hover .div2 {background-color:yellow;}        
.div1:active .div2 {background-color: grey;}

与

并添加以下内容（如果使用jQuery）：

$（'.div1'）。悬停（函数（）{
$（'.div2'）.toggleClass（'hover'）；
});
$（'.div1'）.mousedown（函数（）{
$（'.div2'）.addClass（'active'）；
}).mouseup（函数（）{
$（'.div2'）.removeClass（'active'）；
});

或者，如果您使用MooTools：

<script type="text/javascript">
$$('.div1').addEvents({
    'mouseenter': function() { $$('.div2').addClass('hover'); },
    'mouseleave': function() { $$('.div2').removeClass('hover'); },
    'mousedown': function() { $$('.div2').addClass('active'); },
    'mouseup': function() { $$('.div2').removeClass('active'); },
});
</script>

$$（'.div1'）.addEvents({
'mouseenter'：函数（）{$$（'.div2'）.addClass（'hover'）；}，
“mouseleave”：函数（）{$$（'.div2'）.removeClass（'hover'）；}，
'mousedown'：函数（）{$$（'.div2'）.addClass（'active'）；}，
'mouseup'：函数（）{$$（'.div2'）.removeClass（'active'）；}，
});

---

jshiddle:

你好，谢谢。我可以看出它是有效的，但我无法复制JSFIDLE。剧本需要放在特殊的地方吗？我已经在脚本标签之间插入了头部。我是否需要删除双$？我已经包含jquery-1.9.0.min.js，并直接从JFIDLE复制了代码。@wubbewubbewubbewubbe是的，JSFIDLE使用MooTools框架，您应该从我的答案复制jquery代码。谢谢，它正在工作。必须将它放在jQuery（document）.ready（function（）{…}）之间；

<script type="text/javascript">
$('.div1').hover(function(){
    $('.div2').toggleClass('hover');
});

$('.div1').mousedown(function(){
    $('.div2').addClass('active');
}).mouseup(function(){
    $('.div2').removeClass('active');
});
</script>

<script type="text/javascript">
$$('.div1').addEvents({
    'mouseenter': function() { $$('.div2').addClass('hover'); },
    'mouseleave': function() { $$('.div2').removeClass('hover'); },
    'mousedown': function() { $$('.div2').addClass('active'); },
    'mouseup': function() { $$('.div2').removeClass('active'); },
});
</script>