Comment apporter de l'effet d'ombre portée pour un div à la souris à l'aide de jQuery / Javascript

J'ai beaucoup de divs dans une page html. J'ai besoin de donner à ces divs un effet d'ombre portée sur la souris à l'aide de jQuery/Javascript. Je peux le faire fonctionner si l'ombre est appliquée dans un premier temps mais je ne suis pas en mesure de le faire fonctionner au moment de l'exécution.

Les divs qui doit avoir de l'ombre appliquée a une classe commune. Dans le violon, c'est le test.

J'ai créé un violon

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

Il devrait fonctionner sur IE8 et ci-dessus et donc je suppose que CSS3 peut être utilisé.

Suffit d'utiliser CSS div:hover {box-shadow:...}.
Comment est-ce que va travailler sur IE8?
Je voulais dire seulement que le CSS est l'outil pour ça, pas de JavaScript. Un peu de creuser dans le box-shadow par l'OP conduirait à un fournisseur de préfixes et IE DropShadow filtre.

OriginalL'auteur Bobby Francis Joseph | 2012-07-10

  1. 7

    utiliser css pour l'effet d'ombre (couvre la plupart des navigateurs):

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

    utilisation suivantes jquery:

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

    Code complet ici: http://jsfiddle.net/ZEuVE/3/

    EDIT: désolé , je editted votre premier violon au lieu de faire un nouveau. Mais il fonctionne ^^ 🙂

    OriginalL'auteur PoeHaH

  2. 5

    CSS3 ombre n'est pas pris en charge par IE8

    Pour votre IE8 et les autres navigateurs

    $("div").hover(function() {
        $(this).css(
            "box-shadow", "10px 10px 5px #888"
        );
    }, function() {
        $(this).css(
            "box-shadow", "0px 0px 0px #888"
        );
    });
    juste ce que je cherchais, merci!

    OriginalL'auteur Obi-Wan Spock

  3. 2
    $("div").mouseover(function() {
     $(this).css("box-shadow", "5px 5px 5px #555");
  }).mouseleave(function(){
    $(this).css("box-shadow", "0px 0px 0px #555");
 });

    OU de l'utilisation événement mouseenter

    $("div").mouseenter(function() {
   $(this).css("box-shadow", "5px 5px 5px #555");
  }).mouseleave(function(){
    $(this).css("box-shadow", "0px 0px 0px #555");
});

    OriginalL'auteur Talha

  4. 1

    Il y a peu d'intérêt à utiliser jQuery pour ajouter de simples effets de survol lorsque le CSS :hover pseudo-classe fonctionne parfaitement sur son propre.

    Le seul problème que vous avez est que IE8 ne prend pas en charge native CSS drop-shdows (box-shadow).

    Pour surmonter cela, vous avez deux choix;

    1) pour Tenter de convaincre propriétaires de microsoft DropShadow et Blur filtres dans la production de quelque chose qui ressemble à une ombre. Il est possible, comme ce guide montre, mais dans mon expérience, à l'aide de MS de filtres est votre première étape sur le chemin d'une vie remplie de misère et de douleur. Les filtres affecter d'autres, apparemment sans rapport avec les styles et les éléments sur la même page à la manière qu'il est impossible de prévoir. Tout ce que vous pouvez vraiment faire est d'essayer cela et voir.

    2) utiliser une image. C'est assez mauvais, et il est difficile d'obtenir le droit à l'image si les divs sont tous de tailles différentes. Mais si vous le faites dans une IE8 seule feuille de style et de connaître les dimensions d'avance, il peut bien fonctionner.

    OriginalL'auteur danwellman