2

画像を含む DIV でいっぱいのページがあります。

画像にマウスを合わせると、強調表示したり、クラスなどを追加して簡単に強調する影を追加したりできますが、代わりに他のすべての画像を暗くする方法はありますか。

DIV は DOM に読み込まれます。現在 DIV をホバーして 100% または 1 つの不透明度を保持し、ページ上の残りの DIV は、1 つの DIV が強調表示されたときに 70% または 0.7 にフェードします。

これは可能ですか？

4

4 に答える 4

9

CSS のみ:

jsBin デモ

#parent:hover > div{ opacity:0.6; }    /* Fade ALL OUT on parent hover */   
#parent > div:hover{ opacity:1; }      /* Fade in hovered one */
于 2013-03-04T22:57:26.340 に答える
5 
$('div').hover(function() {
    $('div').css({opacity: '0.7'});
    $(this).css({opacity: '1'});
}, function() {
    $('div').css({opacity: '1'})}
);

これはうまくいくはずだと思います。

于 2013-03-04T22:17:19.477 に答える
3

できることは、新しい div を「マスク」として使用することです。

たとえば、画像 divがあります。z-index:1;

また、別の divがありopacity:50%; position:fixed; top:0; left:0; width:100%; height:100%; z-index:2;ます。この黒い div は、ページの読み込み時に非表示にする必要があります ( display:none;)。

JavaScript を使用して、画像の div にマウスを合わせると、白い div が に変わりz-index:3;、黒い div が に変わるか、display:block;または同様になります。

補遺:

オーバーレイ div は必要なく、他の画像だけを不透明にしたい場合は、JavaScript で不透明度を変更するだけです (これらの不透明度をクラスで管理し、JS を使用してそれらを切り替えることができます)。

于 2013-03-04T22:12:46.200 に答える
2

これを行う最も簡単な方法は、おそらく次のとおりです。

1) ページ全体を覆う半透明のオーバーレイを作成します。

2) DIV のクローンを作成し、オーバーレイの上に配置します。

于 2013-03-04T22:12:52.817 に答える