web-dev-qa-db-fra.com

CSS: Survol d'un élément, effet pour plusieurs éléments?

Je cherche une méthode pour mon problème de vol stationnaire.

<div class="section">

<div class="image"><img src="myImage.jpg" /></div>

<div class="layer">Lorem Ipsum</div>

</div>

Maintenant, les deux classes (image et calque) ont des bordures, les deux ont une couleur différente pour la normale et le survol. Existe-t-il un moyen de faire en sorte que si je survole la classe de calque, la couleur de bordure en survol de la couche et de la classe d'image est active? Et vice versa?

cssxhtmlhover
74
Marko

Vous n'avez pas besoin de JavaScript pour cela.

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>
173
corymathews

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 voudrez peut-être aussi tester cela avec IE6 (je ne sais pas si cela fonctionnera là-bas).

11
Steve Wortham

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>
10
Viliam

Ce n’est pas difficile à réaliser, mais vous devez utiliser la fonction javascript onmouseover. Pseudoscript:

 <div class = "section"> 
 
 <div class = "image"> <img src = "monImage.jpg" onmouseover = ". layer {border: 1px solid noir;} .image {border: 1px black solid;} "/></div>[.____. Printer.Fr.____. DOM.div class class" "layer"> Lorem Ipsum </ div> 
 
 </ div>

Utilisez vos propres couleurs. Vous pouvez également référencer des fonctions javascript dans la commande mouseover.

8
eykanal

Je pense que vous devrez utiliser JavaScript pour accomplir cela.

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 l'identifiant de l'élément en conséquence :)

3
inkedmn

OU 

.section:hover > div {
  background-color: #0CF;
}

REMARQUE L'état de l'élément parent ne peut affecter que l'état de l'élément d'un enfant. Vous pouvez donc utiliser:

.image:hover + .layer {
  background-color: #0CF;
}
.image:hover {
  background-color: #0CF;
}

mais vous ne peut pas utiliser

.layer:hover + .image {
  background-color: #0CF;
}
0
Jnr