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.