Je cherche une méthode pour mon problème de vol stationnaire. Maintenant, les deux classes (image et couche) ont des bordures, les deux ont des couleurs différentes pour la normale et la stationnaire. Y a-t-il un moyen de le faire, donc si je survole une classe de calques, la couleur de la bordure survolée de la classe image et de la couche est active? Et vice versa?CSS: Hover un élément, effet pour plusieurs éléments?
Vous n'avez pas besoin de JavaScript pour ça.
Certains CSS le feraient. Voici un exemple:
<html>
<style type="text/css">
.section { background:#ccc; }
.layer { background:#ddd; }
.section:hover img { border:2px solid #333; }
.section:hover .layer { border:2px solid #F90; }
</style>
</head>
<body>
<div class="section">
<img src="myImage.jpg" />
<div class="layer">Lorem Ipsum</div>
</div>
</body>
</html>Vous devriez utiliser JavaScript pour accomplir cela, je pense.
jQuery:
$(function(){
$("#innerContainer").hover(
function(){
$("#innerContainer").css('border-color','#FFF');
$("#outerContainer").css('border-color','#FFF');
},
function(){
$("#innerContainer").css('border-color','#000');
$("#outerContainer").css('border-color','#000');
}
);
});
Ajustez les valeurs et les numéros d'identification en conséquence :)
Nice, vraiment sympa! Qu'en est-il si j'ai plusieurs sections pour les noms de même classe? Maintenant j'ai essayé cela pour quatre noms de même classe de whit et quand je planer un, tous ces changements ?? Est-ce que je devrais faire un numéro courant devant toutes les sections? Est-ce que jquery a un support générique? (okey, j'essaye juste google pour cela;;)) Merci .. – Marko
Ce n'est pas difficile à réaliser élément, mais vous devez utiliser la fonction javascript onmouseover. Pseudo-script:
<div class="section ">
<div class="image"><img src="myImage.jpg" onmouseover=".layer {border: 1px solid black;} .image {border: 1px solid black;}" /></div>
<div class="layer">Lorem Ipsum</div>
</div>
Utilisez vos propres couleurs. Vous pouvez également référencer des fonctions javascript dans la commande mouseover.
Cela a fonctionné pour moi dans Firefox et Chrome et IE8 ...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
div.section:hover div.image, div.section:hover div.layer {
border: solid 1px red;
}
</style>
</head>
<body>
<div class="section">
<div class="image"><img src="myImage.jpg" /></div>
<div class="layer">Lorem Ipsum</div>
</div>
</body>
</html>
... vous pouvez tester cela avec IE6 aussi bien (je ne sais pas si ça va travailler là-bas) .
En fait, il peut fonctionner dans IE8, semble-t-il. L'ajout du Doctype a fait la différence. Donc là - une solution CSS pure. ;) –
Je pense que la meilleure option pour vous est de joindre les deux divs par un autre div. Ensuite, vous pouvez le faire par CSS de la manière suivante:
<html>
<head>
<style>
div.both:hover .image { border: 1px solid blue }
div.both:hover .layer { border: 1px solid blue }
</style>
</head>
<body>
<div class="section">
<div class="both">
<div class="image"><img src="myImage.jpg" /></div>
<div class="layer">Lorem Ipsum</div>
</div>
</div>
</body>
</html>
OU
.section:hover > div {
background-color: #0CF;
}
NOTE état de l'élément parent ne peut affecter l'élément d'un enfant de l'état de sorte que vous pouvez utiliser:
.image:hover + .layer {
background-color: #0CF;
}
.image:hover {
background-color: #0CF;
}
mais vous ne pouvez pas utiliser
.layer:hover + .image {
background-color: #0CF;
}
Okey, voici le gagnant !! :) Je ne savais pas que si j'avais quelque chose: hover, je peux continuer avec un autre élément! (Quelque chose: hover .second) .. Tous les jours vous apprendre quelque chose de nouveau .. Merci x10 – Marko
Je ne savais pas non plus cela. Merci de votre aide. – fadedbee
Et si les deux divs (celui à survoler et celui à montrer) ne sont pas dans le même div parent immédiat? – bikashg