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 に答える