0

次のようなことを行うにはどうすればよいですか: カーソルがコンテナ div を通過すると、そのコンテナ内の別の div には他のプロパティがあります。たとえば、不透明度 0.2 の背景画像を持つ別の div を含むコンテナ div があります。子 div を作成したいのですが、カーソルがコンテナー上を通過すると、プロパティ opacity:1 で 100% 表示されます。どうやってやるの？

以下に例を示しますが、残念ながら、カーソルを子 div に渡した場合にのみ機能します。

http://jsfiddle.net/Vqmaw/2129/

4

4 に答える 4

5

#maifis:hoverルールを に変更し#container:hover #maifisます。これは基本的に、#containerがホバーされたときに、ルールをその子#maifisに適用することを意味します。

実際のデモ: jsFiddle

于 2012-08-14T13:11:49.090 に答える
1

私の知る限り、これは純粋なcssでは不可能です。あなたの情報とjsfiddleに基づいて、このJQuery JSを使用してください

$(function() {
    $('#container').bind('mouseover', function(){
        $('#maifis').addClass('visible');
    })
    $('#container').bind('mouseout', function(){
        $('#maifis').removeClass('visible');
    })
});

cssで#maifis:hover単純にに変更します。.visible

于 2012-08-14T13:24:59.057 に答える
1

最新のブラウザーでは、これは機能します。

#maifis {
    opacity:0.2;
}
#container:hover #maifis {
    opacity:1;
}

CSS の 2 行目は、 に#containerカーソルを合わせると、それに含まれる名前の要素#maifisの不透明度が 1 になることを意味します。

于 2012-08-14T13:12:16.500 に答える
0

これをJQueryで：

$('#maifis').hover( function(){
    $(this).animate({'opacity':1}, 300);
}, function(){
    $(this).animate({'opacity':0.2}, 300);
}); //Hover on maifis div

また：

$('#container').hover( function(){
    $('#maifis').animate({'opacity':1}, 300);
}, function(){
    $('#maifis').animate({'opacity':0.2}, 300);
}); //Hover on container div
于 2012-08-14T13:10:29.240 に答える