bannière mouseover contrôlée par le texte

J'essaie de créer un effet en déplaçant la souris sur du texte pour que l'image d'une autre partie de la page change en une autre image jusqu'à ce que la souris s'éloigne du texte. Est-ce que quelqu'un sait d'une manière simple de faire ceci? Je préférerais utiliser CSS seulement, mais j'utiliserai js si c'est nécessaire.bannière mouseover contrôlée par le texte

Source

2009-12-14 Alex C

Bienvenue sur StackOverflow - permettez-moi d'être le premier à vous récompenser avec 12 points pour la question réfléchie! – Sampson

Il est possible d'obtenir une interaction entre les différents éléments en utilisant CSS seul, mais il est pas facile. Autant que je puisse voir, cela place des contraintes sur la structure de votre document (peut-être que quelqu'un ayant plus de connaissances sur les sélecteurs CSS que moi-même peut voir des façons de contourner cela). Veuillez considérer ceci comme étant une preuve de concept plutôt qu'une solution complète. Notez que cela nécessite le support CSS niveau 2.

<html> 
    <head> 
     <style> 
img { float: right } 
p.magicParagraph + img { display: none } 
p.magicParagraph:hover + img { display: block } 
p.magicParagraph + img + img { display: block } 
p.magicParagraph:hover + img + img { display: none } 
     </style> 
    </head> 
    <body> 
     <p class="magicParagraph">Hover over me to change the image!</p> 
     <img src="image1.png" /> 
     <img src="image2.png" /> 
    </body> 
</html>

Source

2009-12-14 16:52:51

Obtenir ce type d'interaction entre la souris et divers éléments ne doit pas être abordé avec CSS seul. Vous devrez utiliser Javascript. L'exemple suivant utilise la jQuery Framework (simplement addon pour javascript brut) pour changer la source d'une image lorsque vous survolez un paragraphe:

$("p.magicParagraph").hover(
    function() { $("img.magicImage").attr("src", "image2.jpg"); }, 
    function() { $("img.magicImage").attr("src", "image1.jpg"); } 
);

Ce code lie un ensemble d'événements au vol stationnaire d'un paragraphe ayant la className "magicParagraph". La première fonction est ce qui sera fait lorsque vous passez le paragraphe, et la seconde est ce qui sera fait lorsque vous vous éloignerez du paragraphe. Cela fonctionne avec le balisage suivant:

<p class="magicParagraph">Hover over me to change the image!</p> 
<p><img src="image1.jpg" class="magicImage" /></p>

Source

2009-12-14 16:17:02 Sampson

Je pense que je vais y aller avec ça! Je vous remercie. Je vais aussi essayer celui ci-dessous, donc merci mec qui a répondu avec la version CSS seulement! –

@Alex C: Bienvenue sur le site. Je suis d'accord que vous devriez probablement aller avec la solution Javascript standard plutôt que CSS seulement - mais vous avez demandé CSS uniquement pour que ce soit ce que je vous ai donné. :-P N'oubliez pas d'accepter une réponse après le test - utilisez la coche verte. Il est bon d'attendre 24 heures avant de le faire si vous voulez voir les réponses de plus de gens. –

bannière mouseover contrôlée par le texte

Répondre

Questions connexes