Modification du code CSS de l'élément enfant lorsque le parent est survolé avec jQuery

Question

Modification du code CSS de l'élément enfant lorsque le parent est survolé avec jQuery

Demandé el 21 de Février, 2011: Quand la question a-t-elle été
39356 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Tout d'abord, je suppose que c'est trop complexe pour CSS3, mais si il y a une solution, quelque part, j'aimerais aller à la place.

Le html est assez simple.

<div class="parent">
    <div class="child">
        Text Block 1
    </div>
</div>

<div class="parent">
    <div class="child">
        Text Block 2
    </div>
</div>

L'enfant div est fixé à display:none; par défaut, mais alors display:block; lorsque la souris survole le div parent. Le problème est que cette balise apparaît à plusieurs endroits sur mon site, et je veux seulement que l'enfant sera affiché que si la souris est au-dessus de la mère, et non pas si la souris est au-dessus de tout les autres parents (ils ont tous le même nom de classe et aucune Id).

J'ai essayé d'utiliser $(this) et .enfants (les) en vain. Toute aide serait grandement appréciée! Merci!

$('.parent').hover(function(){
            $(this).children('.child').css("display","block");
        }, function() {
            $(this).children('.child').css("display","none");
        });

Demandé el 21 de Février, 2011 par Hartley Brody

Answer 1

5 Réponses

Answer 2

243voto

Stephen Points 5339

Pourquoi ne pas utiliser simplement CSS?

 .parent:hover .child, .parent.hover .child { display: block; }

puis ajoutez JS pour IE6 (dans un commentaire conditionnel par exemple) qui ne prend pas en charge: survolez correctement:

 jQuery('.parent').hover(function () {
    jQuery(this).addClass('hover');
}, function () {
    jQuery(this).removeClass('hover');
});

Voici un exemple rapide: Fiddle

Répondu el 21 de Février, 2011 par Stephen (5339 Points )

Answer 3

137voto

Ali Adravi Points 932

Pas besoin d’utiliser JavaScript ou jquery, CSS suffit:

 .child{ display:none; }
.parent:hover .child{ display:block; }

Répondu el 14 de Novembre, 2012 par Ali Adravi (932 Points )

Answer 4

9voto

Hussein Points 23042

Utilisez toggleClass() .

 $('.parent').hover(function(){
$(this).find('.child').toggleClass('color')
});

où color est la classe. Vous pouvez styliser la classe à votre guise pour obtenir le comportement souhaité. L'exemple montre comment la classe est ajoutée et supprimée à l'entrée et à la sortie de la souris.

Cochez Exemple de travail ici .

Répondu el 21 de Février, 2011 par Hussein (23042 Points )

Answer 5

3voto

z666zz666z Points 659

J'ai ce que je pense est une meilleure solution, car il est adaptable à plusieurs niveaux, autant que voulu, pas seulement deux ou trois.

J'utilise des frontières, mais il peut également être fait avec whateever style voulu, comme couleur d'arrière-plan.

Avec la frontière, l'idée est de:

Ont une autre couleur de la bordure seulement un div, la div sur lequel la souris est, pas sur n'importe quel parent, non pas sur un enfant, de sorte qu'il peut être vu que de telles div frontière dans une couleur différente, tandis que le reste demeure sur blanc.

Vous pouvez le tester à: http://jsbin.com/ubiyo3/13

Et voici le code:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Hierarchie Borders MarkUp</title>
<style>

  .parent { display: block; position: relative; z-index: 0;
            height: auto; width: auto; padding: 25px;
          }

  .parent-bg { display: block; height: 100%; width: 100%; 
               position: absolute; top: 0px; left: 0px; 
               border: 1px solid white; z-index: 0; 
             }
  .parent-bg:hover { border: 1px solid red; }

  .child { display: block; position: relative; z-index: 1; 
           height: auto; width: auto; padding: 25px;
         }

  .child-bg { display: block; height: 100%; width: 100%; 
              position: absolute; top: 0px; left: 0px; 
              border: 1px solid white; z-index: 0; 
            }
  .child-bg:hover { border: 1px solid red; }

  .grandson { display: block; position: relative; z-index: 2; 
              height: auto; width: auto; padding: 25px;
            }

  .grandson-bg { display: block; height: 100%; width: 100%; 
                 position: absolute; top: 0px; left: 0px; 
                 border: 1px solid white; z-index: 0; 
               }
  .grandson-bg:hover { border: 1px solid red; }

</style>
</head>
<body>
  <div class="parent">
    Parent
    <div class="child">
      Child
      <div class="grandson">
        Grandson
        <div class="grandson-bg"></div>
      </div>
      <div class="child-bg"></div>
    </div>
    <div class="parent-bg"></div>
  </div>
</body>
</html>

Répondu el 6 de Février, 2012 par z666zz666z (659 Points )

Answer 6

3voto

Roger Roelofs Points 59

La réponse de Stephen est correcte mais voici l'adaptation de sa réponse:

HTML

 <div class="parent">
    <p> parent 1 </p>
    <div class="child">
        Text Block 1
    </div>
</div>

<div class="parent">
    <p> parent 2 </p>
    <div class="child">
        Text Block 2
    </div>
</div>

CSS

 .parent { width: 100px; min-height: 100px; color: red; }
.child { width: 50px; min-height: 20px; color: blue; display: none; }
.parent:hover .child, .parent.hover .child { display: block; }

jQuery

 //this is only necessary for IE and should be in a conditional comment

jQuery('.parent').hover(function () {
    jQuery(this).addClass('hover');
}, function () {
    jQuery(this).removeClass('hover');
});

Vous pouvez voir cet exemple en cours d’exécution sur jsFiddle .

Répondu el 21 de Février, 2011 par Roger Roelofs (59 Points )

Modification du code CSS de l'élément enfant lorsque le parent est survolé avec jQuery

Réponses

Cochez Exemple de travail ici .

HTML

CSS

jQuery

Questions en vedette

Top Tags

Prograide.com

Powered by:

Modification du code CSS de l'élément enfant lorsque le parent est survolé avec jQuery

Réponses

Cochez Exemple de travail ici .

HTML

CSS

jQuery

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: