0

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

这适用于除 IE 和“活动”之外的所有 4 种主要浏览器。我如何让它在 IE 中工作？

jsfiddle在这里-> http://jsfiddle.net/4vaY6/197/

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

<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;}
4

1 回答 1

1

根据http://www.quirksmode.org/css/contents.html：

IE 8-10（也可能是旧版本）有一个小错误：在嵌套元素上单击鼠标不会触发 :active。

IE7 的情况更糟。

您可以使用 JavaScript 来模拟 :active 行为：

代替

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

和

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

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

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

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

或者，如果您使用 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>

jsFiddle：http: //jsfiddle.net/4vaY6/201/

于 2013-02-15T00:58:35.683 回答