3

HTMLページに多くのdivがあります。jQuery/Javascript を使用して、マウスオーバー時にこれらの div にドロップ シャドウ効果を与える必要があります。ドロップ シャドウを最初に適用する場合は機能しますが、実行時に機能させることはできません。

影を適用する必要がある div には、共通のクラスがあります。フィドルではテストです。

フィドルを作成しました

http://jsfiddle.net/bobbyfrancisjoseph/ZEuVE/2/

IE8以降で動作するはずなので、CSS3を使用できると思います。

4

5 に答える 5

7

影の効果にはこの css を使用します (ほとんどのブラウザーをカバーします)。

.classWithShadow{
   -moz-box-shadow: 3px 3px 4px #000; 
   -webkit-box-shadow: 3px 3px 4px #000; 
   box-shadow: 3px 3px 4px #000; 
}

次の jquery を使用します。

$(".yourDiv").hover(function()
{ 
   $(this).toggleClass('classWithShadow');
});

完全なコードはこちら: http://jsfiddle.net/ZEuVE/3/

編集: 申し訳ありませんが、新しいフィドルを作成する代わりに、最初のフィドルを編集しました。しかし、それは動作します^^ :)

于 2012-07-10T09:54:34.030 に答える
5

CSS3シャドウはIE8ではサポートされていません

上記のIE8およびその他のブラウザーの場合

$("div").hover(function() {
        $(this).css(
            "box-shadow", "10px 10px 5px #888"
        );
    }, function() {
        $(this).css(
            "box-shadow", "0px 0px 0px #888"
        );
    });
于 2012-07-10T09:57:19.973 に答える
2 
$("div").mouseover(function() {
     $(this).css("box-shadow", "5px 5px 5px #555");
  }).mouseleave(function(){
    $(this).css("box-shadow", "0px 0px 0px #555");
 });

またはmouseenterイベントを使用します

$("div").mouseenter(function() {
   $(this).css("box-shadow", "5px 5px 5px #555");
  }).mouseleave(function(){
    $(this).css("box-shadow", "0px 0px 0px #555");
});
于 2012-07-10T10:03:46.727 に答える
1

:hoverCSS疑似クラスが単独で完全に機能する場合、単純なホバー効果を追加するために jQuery を使用してもほとんど意味がありません。

唯一の問題は、IE8 がネイティブ CSS ドロップ シャドウ (ボックス シャドウ) をサポートしていないことです。

これを克服するには、2 つの選択肢があります。

1) Microsoft 独自のフィルターをだまして、ドロップ シャドウに似たものを生成しようとしDropShadowますBlur。このガイドが示すように、それは可能ですが、私の経験では、MS のフィルターを使用することは、惨めさと苦痛に満ちた人生への道の第一歩です。フィルターは、同じページ上の無関係に見える他のスタイルや要素に、予測できない方法で影響を与えます。あなたが本当にできることは、それを試して見ることだけです。

2) 画像を使用します。これはかなり悪いことであり、div のサイズがすべて異なる場合、画像を正しく表示するのは困難です。ただし、IE8 のみのスタイル シートで実行し、サイズが事前にわかっている場合は、うまく機能します。

于 2012-07-10T10:08:00.083 に答える