Comment démontrer que l'enfant div souris passe dessus du div parent

J'ai un certain nombre de parents divs (.parent_div), qui contiennent chacune un enfant div (.hotqcontent) où je l'ai sortie les données de ma base de données à l'aide d'une boucle.

Voici mon balisage:

<div class="content">
  <div class="parent_div">
    <div class="hotqcontent">
      content of first div goes here...
    </div>
    <hr>
  </div>
  <div class="parent_div">
    <div class="hotqcontent">
      content of second div goes here...
    </div>
    <hr>
  </div>
  <div class="parent_div">
    <div class="hotqcontent">
      content of third div goes here...
    </div>
    <hr>
  </div>
  <div class="parent_div">
    <div class="hotqcontent">
      content of fourth div goes here...
    </div>
    <hr>
  </div>
</div>

Ce que je voudrais, c'est quand un utilisateur passe /mouseovers un div parent, le contenu de l'enfant div contenues à l'intérieur doit être révélé.

Pour atteindre ce j'ai écrit ce script jQuery, mais il ne semble pas y avoir de travail. Il n'est même pas montrer le qui-vive!

<script> 
$(document).ready(function() {
  $(function() {
    $('.parent_div').hover(function() {
      alert("hello");
      $('.hotqcontent').toggle();
    });
  });
}); 
</script>

Comment puis-je modifier ou de remplacer mon code existant pour atteindre le résultat souhaité?

OriginalL'auteur Ashutosh Singh | 2013-05-10

19

Si vous voulez pur CSS que vous pouvez le faire comme ceci....

Dans le CSS ci-dessous, lors de l'initialisation/chargement de la page, je cache l'élément enfant à l'aide de display: none; puis sur hover de l'élément parent, disent avoir un class parent_div, j'utilise display: block; pour afficher l'élément.
```
.hotqcontent {
   display: none;
   /* I assume you'll need display: none; on initialization */ 
}

.parent_div:hover .hotqcontent { 
   /* This selector will apply styles to hotqcontent when parent_div will be hovered */
   display: block;
   /* Other styles goes here */
}
```
Démo

C'est probablement la meilleure approche, car c'est une représentation du problème. En outre, ce n'est pas sensible à des questions comme le DOM de l'état par le design.
Je fais une demande, veuillez patienter...
J'ai testé, mais il n'affiche pas le hotqcontent div sur la souris au-dessus de la div parent. Pourquoi? S'il vous plaît aider
href="http://jsfiddle.net/MJHHS/" >jsfiddle.net/MJHHS
vous êtes très serviable et aimable personne. En tant qu'être humain c'est très important. Je suppose que les gens qui liront ce commentaire est aussi aider les autres développeurs de la même manière.

OriginalL'auteur Mr. Alien

Essayer cette

$(document).ready(function() {
  $('.parent_div').hover(function() { 
    alert("hello");
    $(this).find('.hotqcontent').toggle(); 
  });
});

$(function() {
  $('.parent_div').hover(function() { 
    alert("hello");
    $(this).find('.hotqcontent').toggle(); 
  });
});

Pourquoi downvote ,Veuillez expliquer
Je n'ai pas fait voter le bas..
ok ok.certains l'on fait avec ma réponse précédente

OriginalL'auteur PSR

3

Vous pouvez utiliser le css pour ce,
```
.parent_div:hover .hotqcontent {display:block;}
```
OriginalL'auteur Sameera Thilakasiri
3

Cela peut être fait avec de la pure css (j'ai ajouté un couple de bits dans juste pour le rendre un peu plus lisible pour le JSFIDDLE):
```
    .parent_div{height: 50px;background-color:#ff0000;margin-top: 10px;}
    .parent_div .hotqcontent {display: none;}
    .parent_div:hover .hotqcontent {display:block;}
```
Cela permettra d'assurer que votre site fonctionne toujours de la même manière si les utilisateurs qui ont désactivé Javascript.

De démonstration:
http://jsfiddle.net/jezzipin/LDchj/

OriginalL'auteur jezzipin
1

Avec .hotqcontent vous sélectionnez chaque élément avec cette classe. Mais vous voulez sélectionner uniquement les .hotqcontent élément sous la mère.
```
$('.hotqcontent', this).toggle();
```
OriginalL'auteur devnull69

$(document).ready(function(){
    $('.parent_div').on('mouseover',function(){
        $(this).children('.hotqcontent').show();
    }).on('mouseout',function(){
        $(this).children('.hotqcontent').hide();
    });;
});

JSFIDDLE

OriginalL'auteur Anton

vous n'avez pas besoin document.ready fonction à l'intérieur de document.ready..

essayer cette

  $(function() {  //<--this is shorthand for document.ready
        $('.parent_div').hover(function() { 
             alert("hello");
             $(this).find('.hotqcontent').toggle(); 
             //or
            $(this).children().toggle(); 
       });
    });

et oui, votre code de basculer tous les div avec la classe hotqcontent..(je pense que vous n'en avez pas besoin) de toute façon si vous souhaitez activer cette div ensuite utiliser this référence à la bascule de cette div

mis à jour

vous pouvez utiliser sur la délégation de l'événement pour générées dynamiquement des éléments

$(function() {  //<--this is shorthand for document.ready
        $('.content').on('mouseenter','.parent_div',function() { 
             alert("hello");
             $(this).find('.hotqcontent').toggle(); 
             //or
            $(this).children().toggle(); 
       });
    });

J'ai essayé mais ce n'est pas de donner une alerte également sur la souris sur le div parent . je suis l'aide de code.jquery.com/jquery-1.9.1.min.js

OriginalL'auteur bipen

vous pouvez essayer ceci:

jQuery(document).ready(function(){
jQuery("div.hotqcontent").css('display','none');
jQuery("div.parent_div").each(function(){
    jQuery(this).hover(function(){
        jQuery(this).children("div.hotqcontent").show(200);
    }, function(){
        jQuery(this).children("div.hotqcontent").hide(200);
    }
    );
});

});

OriginalL'auteur akbar amani

Vous devez vous connecter pour publier un commentaire.