28200 sujets

CSS et mise en forme, CSS3

Action d'une balise sur une autre balise

Bonjour tout le monde.

J'ai une petite question de CSS : comment formuler le fait que lorsque on "hover" sur une balise #1, une autre balise #2 affiche une background-image ?

Merci d'avance !
Attention, ça ne fonctionne que si balise2 est enfant de balise1. Dans tous les autres cas, il faut passer par JavaScript.
Administrateur
Bonjour,

C'est faisable, selon le contexte, de plusieurs manières :
- A:hover B (si B est descendant de A)
- A:hover > B (si B est fils de A)
- A:hover + B (si B est frère directement suivant de A)
- A:hover ~ B (si B est un frère suivant de A)

Tous ces sélecteurs fonctionnent dès IE7
En tout cas, il suffit de placer le hover sur l'élément A et de sélectionner correctement l'élément que tu veux faire changer
Merci infiniment pour vos réponses... J'ai essayé les différentes options, mais il semble qu'il y ait quelque chose qui cloche, je ne parviens pas à obtenir mon changement d'image de background...

			<div id="prog">
		
				<h2>La programmation</h2>
					<ul>
						<li id="tsamere"><a href="">Arnaud Tsamère</a></li>
						<li id="rollin">François Rollin</li>
						<li><div id="carousel"></div></li>
					</ul>
					
									
				
			</div>

#tsamere:hover{
	color: white;
	background-color: black;
}
	
#tsamere:hover ~ #carousel {
	background-image: url('../images/tsamere1.jpg');
	background-color: white;
}	



#carousel{
	height: 400px;
	width: 300px;
	margin: 5px 0 0 55px;
	background-color :#210000;
	float: left;
	
}


Vous l'aurez compris, le but est d'obtenir une image dans un cadre appelé "carousel" en passant le pointeur sur un élément de liste.
Normal, il faudrait que carousel soit le frère de tsamere (ici, il se trouve dans un li, frère de tsamere).
Modifié par Laurie-Anne (25 May 2012 - 08:34)
#carousel étant dans un li frère de #tsamere, tu peux le cibler correctement en faisant ceci :


#tsamere:hover ~ li #carousel

ou

#tsamere:hover ~ li > #carousel


Il te manquait pas grand chose !
upload/1529663505-71475-code.png Bonjourrr, j'ai une question dans le même style, en gros je désire, survoler un endroit sur ma page, pour faire disparaître une vidéo un peu plus bas, tant que la souris est sur la sélection du haut, en suivant votre tuto ça marche, j'ai appliquer une opacité zéro au survol et la vidéo disparaît bien ! mais bon problème c'est que quand je pointe la souris vers la vidéo, la vidéo disparaît aussi, impossible de la lire.
Est il possible de ne pas avoir cette action de retro-action quand je fais
.BulleGauche:hover .video
J'aimerai l'opacité de la vidéo en passant par BulleGauche mais pas quand je survol .video.
Modifié par vaiordy (22 Jun 2018 - 12:31)
Bonjour les amis,
j'ai un souci similaire, et j'ai suivi vos recommandations mais ceci ne fonctionne pas.
Je vous explique:
Je veux que quand je survole un bouton sur lequel la fonction hover est déjà appliquée, une image doit aussi avoir une fonction hover.
Merci d'avance.
eluzerkhari a écrit :
j'ai un souci similaire, et j'ai suivi vos recommandations mais ceci ne fonctionne pas.


Je te conseil d'ouvrir ton propre sujet, avec ton problème expliqué clairement et un exemple avec ton code qui ne fonctionne pas Smiley smile
Sujet clos
Aller à