Comment sélectionner deux liens à la fois? (C.-à-titre et image)

Question

Je me demande comment réaliser ce genre de galerie de vignettes ...

http://cargocollective.com/saintea

comme lorsque vous roulez sur la vignette,

lui donne un effet de surbrillance le titre en même temps, même si elles sont deux éléments distincts.

je pourrais les faire en un seul fichier, mais la raison pour laquelle je veux avoir les séparer est d'attribuer

effets différents :)!

quelqu'un peut-il me prêter un coup de main?

merci beaucoup d'avoir lu cet article !!!

bonne journée!

Answer 1

Il s'agit simplement de deux <div> s dans une balise de liaison. Mais les éléments de bloc dans les éléments en ligne ne sont pas valides, pour que vous puissiez mieux utiliser <span> éléments dans une balise de lien comme celui-ci:

HTML:

<a href="#"> 
    <span class="one">text</span> 
    <span class="two">something else</span> 
</a> 

a:link span, a:visited span { 
    display: block; /* <-- for example */ 
    color: blue; 
} 

CSS:

a:hover span.one { 
    color: yellow; 
} 

a:hover span.two { 
    color: orange; 
} 

Answer 2

I'D Faites-le de la façon suivante:

<img src="image.gif" 
    onmouseover="change image style, then change getElementById('comment') style" 
    onmouseout="change all back"/> 
<span id="comment">some text</span> 

Answer 3

Comme les autres réponses l'indiquent, vous pouvez le faire avec les deux javas cript et CSS. La page utilise javascript et le framework jQuery pour le faire.

J'ai fait une démo de la façon dont cela peut être fait dans les deux sens: here.

avec le code HTML suivant:

<a href="#" id="theLink"> 
    <img id="theImage" src="http://dummyimage.com/100x50/000/fff&text=Some+image" /> 
    <span id="theText">Some text</span> 
</a> 

Vous pouvez le faire avec jQuery (ce qui est à peu près comment cette page le fait):

$("#theImage").hover(
    function() { 
     $(this).fadeTo("fast", 0.7); 
     $("#theText").addClass("hover"); 
    }, 
    function() { 
     $(this).fadeTo("fast", 1); 
     $("#theText").removeClass("hover"); 
    } 
); 

où les styles de classe hover le texte.

Ici, vous dites jQuery pour tirer une fonction lorsque vous passez la souris sur l'image, et une autre fonction lorsque vous passez la souris sur l'image. $("this).fadeTo définit l'opacité de l'image, tandis que $("#theText").addClass .. bien, il ajoute la classe à theText.

(ofcourse, vous n'avez pas besoin jQuery pour ce faire, il est juste très pratique d'utiliser un tel cadre, car il fait abstraction grande partie du travail)

---

Ou avec CSS:

#imagelink:hover img { 
    /* See http://www.quirksmode.org/css/opacity.html for opacity */ 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; 
    filter: alpha(opacity=70);  
    opacity: 0.7; 
} 
#imagelink:hover span { 
    background-color: #66E8FF; 
} 

ici, nous racontons le navigateur que lorsque nous passez la souris sur le lien avec l'identifiant imagelink, le contenu à l'intérieur du lien de type img devraient avoir une opacité de 70%, tandis que les éléments du type span devraient VHA e une couleur de fond différente.

Answer 4

Il est parfaitement acceptable d'enrouler à peu près tous les éléments d'un seul élément d'ancrage. La plupart des navigateurs supportent déjà ceci, et w/HTML5 c'est réellement préféré. Donc, je voudrais juste faire:

<a href="#"> 
    <img src="image.jpg" width="" height="" alt="" > 
    <p>Description of the image</p> 
</a> 

a:hover img { } 
a:hover p { }