JQUERY - mouseOut

Question

Je rencontre des problèmes en utilisant .mouseout Je ne suis pas expert :)

J'ai un ensemble d'images (avec ids # image 1, # 2 .. image) que lors du survol d'un ensemble de < span> avec ids # for-image-1, # for-image-2 ... donne l'opacité à l'image assignée:

Ceci est la première partie du script/WORKS FINE /, il supprime l'opacité de tous images et ajoute la classe opaque à l'image assignée lors du survol de la durée correcte <>

<script> 
$(document).ready(function() { 
    $("#secciones span").hover(function() { 
    $("#golfball img").removeClass("opaque"); 

    var imageToShow = $(this).attr("id").replace("for-", ""); 
    $("#golfball #"+imageToShow).addClass("opaque"); 

    }); 
}); 

</script> 

C'est la autre moitié, et où je suis ayant le problème, je veux la première image qui a l'id # 1 image pour récupérer l'opacité de la souris sur une <>

durée

<script> 
$(document).ready(function() { 
    $("#secciones span").mouseout(function() { 
    $("#image-1").addClass("opaque"); 

    }); 
}); 

</script> 

Merci à l'avance!

Answer 1

Peut-être une question stupide, mais y a-t-il une raison pour laquelle vous utilisez hover dans un et mouseout dans un autre?

De même, avez-vous créé plus d'un élément HTML avec le même ID? Les identifiants doivent être uniques dans votre code HTML, les tags de classe ne doivent pas nécessairement l'être. Cela peut provoquer des effets indésirables.

La page API jQuery (http://api.jquery.com/mouseover/) pour mouseover/mouseout montre un exemple de enchaînant ces deux événements sur l'élément:

$("div.overout").mouseover(function() { 
    i += 1; 
    $(this).find("span").text("mouse over x " + i); 
    }).mouseout(function(){ 
    $(this).find("span").text("mouse out "); 
    }); 

Si je comprends bien, c'est ce que vous voulez donner un coup de feu avec.

Answer 2

Je ne sais pas je comprends correctement, mais si vous voulez obtenir l'opacité arrière peut-être changer le mouseout

$("#image-1").addClass("opaque"); 

à

$("#image-1").removeClass("opaque"); 

Answer 3

Avez-vous besoin IE6-Support? Si oui, faites comprendre à votre Boss que IE6 est nul et que tout le monde ne l'utilise pas: P (oh, si c'était si simple ...). Mais si vous n'avez pas besoin, vous n'avez pas besoin du tout javascript, un simple CSS fera:

Démo: http://jsfiddle.net/2GXny/

<div class="imgContainer"> 
    <img style="width:100px; height:100px;" src="./test.jpg" alt="some alt" /> 
    <span>lalalalalaa</span> 
    <img style="width:100px; height:100px;" src="./test.jpg" alt="some alt" /> 
    <span>lalalalalaa</span> 
</div> 

Avec le CSS associée:

.imgContainer span { display: none; } 
.imgContainer img:hover + span { display:inline; } 

Il est évident que le style est nécessaire pour positionner les travées, etc ... Fonctionne bien à travers les navigateurs, mais IE6 - évidemment ....

Answer 4

Vous devez utiliser la fonction de survol pour appeler à la fois la souris et m sortir. Essaye ça.

<script> 
$(document).ready(function() { 
    $("#secciones span").hover(function() { 
     $("#golfball img").removeClass("opaque"); 

     var imageToShow = $(this).attr("id").replace("for-", ""); 
     $("#golfball #"+imageToShow).addClass("opaque"); 

    }, 
    function(){ 
     $("#image-1").addClass("opaque"); 
    }); 
}); 
</script> 

Answer 5

La fonction jquery hover prend généralement deux arguments: hoverIn et hoverOut. Au lieu de lier un événement mouseout, passez votre fonction "make opaque" à la liaison hover.En incluant une seconde fonction, vous n'avez pas besoin de la sortie de la souris car elle est déjà contrôlée par la fonction de survol.

Answer 6

HTML

<div id='secciones'> 
    <span> 
     <div id='golfball'> 
      <img src='http://kaczanowscy.pl/tomek/sites/default/files/test_result_green.png'><br /> 
      <img src='http://www.careercup.com/attributeimage?pid=microsoft-interview-questions'><br /> 
      <img src='http://img.brothersoft.com/games/flash/icon/m/math-test-3572-1264177735.jpg'> 
     </div> 
    </span> 
</div> 

Script

$(function() { 
    $('#golfball img').each(function() { 
     $(this).css('opacity', '0.3').bind({ 
      mouseenter : function() { 
       $(this).animate({ 
        opacity : 1.0 
       }); 
       //you may add class here 
      }, 
      mouseleave : function() { 
       $(this).animate({ 
        opacity : 0.5 
       }); 
       // you may remove class here 
      } 
     }); 
    }); 
}); 

---

DEMO

---