CSS : Survoler un élément, effet pour plusieurs éléments ?

Question

CSS : Survoler un élément, effet pour plusieurs éléments ?

Demandé el 22 de Septembre, 2009: Quand la question a-t-elle été
83433 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Je suis à la recherche d'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 couche, ont des frontières. Les deux ont une couleur différente pour la classe normale et la classe survolée. Y a-t-il un moyen de faire en sorte que si je survole la classe layer, la couleur de la bordure de survol des classes layer et image soit active ? Et vice versa ?

Demandé el 22 de Septembre, 2009 par Marko

Answer 1

5 Réponses

Answer 2

203voto

corymathews Points 4953

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>

Répondu el 22 de Septembre, 2009 par corymathews (4953 Points )

14 votes

Okey, voici le gagnant ! :) Je ne savais pas que si j'ai quelque chose:hover, je peux continuer cela avec un autre élément ! (somthing:hover .second) Chaque jour, vous apprenez quelque chose de nouveau Merci x10

Commenté el 23 de Septembre, 2009 par Marko

8 votes

Que se passe-t-il si les deux divs (celle à survoler et celle à afficher) ne se trouvent pas dans la même div parent immédiate ?

Commenté el 16 de Octobre, 2011 par bikashg

3 votes

Vous pouvez remonter la structure aussi loin que vous le souhaitez, ou vous pouvez ajouter un élément qui sera le parent des deux. Parfois, cependant, s'ils n'ont rien en commun, vous devrez recourir au javascript.

Commenté el 17 de Octobre, 2011 par corymathews

Afficher 4 autres commentaires

Answer 3

11voto

Steve Wortham Points 11563

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 tester cela avec IE6 également (je ne suis pas sûr que cela fonctionne ici).

Répondu el 22 de Septembre, 2009 par Steve Wortham (11563 Points )

0 votes

En fait, cela peut fonctionner dans IE8, il semble. L'ajout du Doctype a fait la différence. Voilà donc une solution purement CSS ;)

Commenté el 22 de Septembre, 2009 par Steve Wortham

Answer 4

9voto

Viliam Points 2219

Je pense que la meilleure option pour vous est d'entourer les deux divs par une 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>

Répondu el 22 de Septembre, 2009 par Viliam (2219 Points )

Answer 5

7voto

eykanal Points 8133

Ceci n'est pas difficile à réaliser, mais vous devez utiliser le javascript onmouseover fonction. Pseudo-scriptum :

<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 faire référence à des fonctions javascript dans la commande de mouseover.

Répondu el 22 de Septembre, 2009 par eykanal (8133 Points )

1 votes

+1 pour l'utilisation du changement de classe CSS au lieu de l'élément un comme autre exemple.

Commenté el 22 de Septembre, 2009 par DVK

0 votes

Cela fonctionne aussi, merci ! J'essaie juste d'éviter le codage en ligne autant que possible ;)

Commenté el 22 de Septembre, 2009 par Marko

Answer 6

2voto

inkedmn Points 12655

Vous devrez utiliser JavaScript pour y parvenir, 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 ids d'éléments en conséquence :)

Répondu el 22 de Septembre, 2009 par inkedmn (12655 Points )

0 votes

Joli, vraiment joli ! Qu'en est-il si j'ai plusieurs sections pour les mêmes noms de classe ? J'ai essayé pour quatre sections avec les mêmes noms de classe et quand je survole l'une d'entre elles, elles changent toutes ? Dois-je faire un numéro courant devant toutes les sections ? Est-ce que jquery a un support pour les jokers ? (okey, j'ai essayé juste google pour cela ! ;)) Merci.

Commenté el 22 de Septembre, 2009 par Marko

CSS : Survoler un élément, effet pour plusieurs éléments ?

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

CSS : Survoler un élément, effet pour plusieurs éléments ?

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: