Modification de l'Opacité avec jQuery

J'ai 9 points sur une grille, je veux que tous les éléments de 0,5 opacité sur chaque article et uniquement lorsque planait au-dessus si le div/item et tout à l'intérieur ont 1.0 opacicty.

Voici le JS

$('.gallery-single').css({ opacity: 0.5 });

$('.gallery-single a').mouseover(function(){
    $('.gallery-single-title', this).css('display', 'block');
        $('.gallery-single', this).css({ opacity: 1 });
});
$('.gallery-single a').mouseout(function(){
    $('.gallery-single-title', this).css('display', 'none');
        $('.gallery-single', this).css({ opacity: 0.5 });
});

HTML

<div class="gallery-single">
<a href="#" title="">
<div class="gallery-single-title hide">Some text goes here</div>
<div class="gallery-single-img"><img src="http://img.youtube.com/vi/code/0.jpg" width="300" height="200" /></div>
</a>
</div>

Tous les éléments sont à l'opacité de 0,5 lorsqu'il est chargé, mais opacités ne sont pas modifiés lorsque concentré.
Ce que je fais mal?

Merci de poster votre HTML?

OriginalL'auteur Ian | 2011-06-08

  1. 1

    Le problème est que .gallery-single est un ancêtre de l'ancre (c'est à dire qu'il est en dehors de l'ancre). Le $(selector, this) format d'image pour le sélecteur dans this. Au lieu de cela, utiliser .closest():

    $(this).closest('.gallery-single').css(...);

    Note: jQuery donne cet avertissement a propos de souris (s'applique également à mouseout):

    Ce type d'événement peut causer de nombreux
    maux de tête dus à des événements de bulles. Pour
    exemple, lorsque le pointeur de la souris se déplace
    au cours de la Intérieure de l'élément dans ce
    exemple, un événement mouseover sera
    envoyé, puis remonte
    Externe. Cela peut déclencher notre lié
    passage de la souris à un mauvais gestionnaire
    fois. Voir la discussion pour
    .mouseenter() pour un utile
    alternative.

    Vous devez utiliser mouseenter (et mouseleave) à la place (ou le hover() fonction qui combine idéalement les deux).

    Ah ok, et merci pour l'astuce.

    OriginalL'auteur David Tang

  2. 6

    Essayez ceci:

    $('.gallery-single a').hover(function(){
    $(this).closest('.gallery-single-title').css('display', 'block');
        $(this).closest('.gallery-single').css({ opacity: 1 });
},
function(){
    $(this).closest('.gallery-single-title').css('display', 'none');
        $(this).closest('.gallery-single').css({ opacity: 0.5 });
});

    Exemple de travail.

    Im peur que cela ne fonctionne pas
    My bad, je l'ai mis à jour
    Ah oui, cela fonctionne aussi, et ainsi de doesBox9 de la méthode, mais je n'ai qu'un seul choix à cocher qui est correct lol
    Si les deux ont été utiles, upvote, et accepter celui qui vous vous sentez est plus utile.

    OriginalL'auteur Michael Robinson