Plutôt étrange question css/opacity/hover

Désolé pour le titre, je ne pouvais vraiment pas penser à la façon de simplifier ce problème.Plutôt étrange question css/opacity/hover

Maintenant, le problème est le suivant: j'ai une rangée d'images miniatures dans un div:

<div id="daumen"> 

<a href='#' class='gsc_thumb_row'> 
    <img src='image1.jpg' class='thumbnails' /> 
</a> 

<a href='#' class='gsc_thumb_row'> 
    <img src='image2.jpg' class='current-thumbnail'/> 
</a> 

<a href='#' class='gsc_thumb_row'> 
    <img src='image3.jpg' class='thumbnails' /> 
</a> 

</div>

(. Je ne peux pas modifier le code HTML, il est livré par un script)

Comme vous avez peut-être remarqué, deux d'entre eux ont les "vignettes" de la classe, et une "vignette courante". Ce que je voudrais arriver est la suivante: Par défaut, toutes les images à l'exception de la vignette actuelle ont une opacité de 0.5. Sur mouseover, l'opacité devrait changer à 1.

Le CSS J'utilise:

#daumen { 

    } 

#daumen img:hover{ 
     filter:alpha(opacity=100); 
     -moz-opacity:1; 
     -khtml-opacity: 1; 
     opacity: 1; 
    } 

#daumen img{ 
     filter:alpha(opacity=50); 
     -moz-opacity:0.5; 
     -khtml-opacity: 0.5; 
     opacity: 0.5; 
    } 

.current-thumbnail a:link{ 
     filter:alpha(opacity=100); 
     -moz-opacity:1; 
     -khtml-opacity: 1; 
     opacity: 1; 
    }   

.thumbnails { 

    } 

.current-thumbnail { 

}

Jusqu'à présent, tout cela fonctionne, sauf que l'opacité de la vignette actuelle est également définie à 0.5 - comment puis-je éviter cela?

Je suis sûr qu'il y a une solution très simple, mais j'ai déjà triché avec le CSS depuis très longtemps déjà.

je l'ai mis dans un Fiddle pour vous: http://jsfiddle.net/6DGAx/

Merci à l'avance, Cenk

Source

2010-07-17 Cenk

Faites un sélecteur plus spécifique:

#daumen .current-thumbnail a:link{

En outre, assurez-vous que vos matchs de balisage votre CSS parce que votre img a cette classe .........

Source

2010-07-17 21:58:12

Pour clarifier, les styles sont prioritaires en fonction de la spécificité du sélecteur CSS. En ajoutant l'identifiant #daumen à l'avant du sélecteur de classe, il devient plus spécifique que le sélecteur "#daumen img", et son opacité est utilisée. –

OUI! La réponse de Hrishi et celle de Hrishi a finalement réussi. Merci beaucoup! – Cenk

De plus, définissez toujours vos pseudo-sélecteurs de lien dans l'ordre suivant: Lien, Visité, Actif, Vol stationnaire. LVHA, en souvenir, j'ai composé Las Vegas Hookers Association, je n'ai jamais été là, mais j'ai entendu dire qu'ils avaient des cartes de visite. un {} sans le pseudo-sélecteur définira les valeurs par défaut pour chacun d'entre eux et devrait être mis en premier. – joelpittet

Il devrait être

#daumen .thumbnail{

au lieu de

#daumen img{

si vous voulez sélectionner la vignette de la classe

Source

2010-07-17 22:04:50 Hrishi

Merci beaucoup, cela et la réponse de meder a fonctionné parfaitement :) Je pourrais seulement placer une réponse comme acceptée, désolé. – Cenk

1er tout ce que vous ciblez votre élément à tort, parce qu'il n'y a pas a l'intérieur d'un élément avec classe current-thumbnail comme vous le suggère la règle actuelle (.current-thumbnail a:link)

il devrait être #daumen .current-thumbnail

Source

2010-07-17 22:08:40

Plutôt étrange question css/opacity/hover

Répondre

Questions connexes