Jak wyświetlić div dziecka na zawisie myszy div rodzica

Question

Mam liczbę div rodziców (.parent_div), z których każdy zawiera div child (.hotqcontent), w którym dane wyjściowe z mojej bazy danych za pomocą pętli.

Oto mój obecny markup:

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

Co chciałbym osiągnąć to, gdy użytkownik najedzie/mouseovers div nadrzędnego, zawartość div dziecka zawarte w powinny być ujawnione.

Aby to osiągnąć, napisałem następujący skrypt jQuery, ale wygląda na to, że nie działa. Nawet nie pokazuje alarmu!

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

Jak mogę zmienić lub zastąpić istniejący kod, aby uzyskać pożądany wynik?

Answer 1

Jeśli chcesz czystego CSS niż można to zrobić w ten sposób ....

W poniższym CSS na obciążenia inicjalizacji/strona, ja ukrywa element podrzędny używając display: none; i wtedy na hover rodzica element, powiedzmy o classparent_div, używam display: block; do odkrycia elementu.

.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 */ 
} 

Demo

Answer 2

Spróbuj

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

Albo

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

Answer 3

nie trzeba document.ready funkcji wewnątrz document.ready ..

spróbować tej

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

i tak Twój kod będzie przełączyć wszystkie div z klasą hotqcontent .. (co moim zdaniem nie trzeba tego) Tak czy inaczej, jeśli chcesz, aby włączyć tę szczególną div następnie użyć this odniesienie do przełączania tego konkretnego div

aktualizowany

można wykorzystać na imprezy delegowanego generowanych dynamicznie elementów

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

Answer 4

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

JSFIDDLE

Answer 5

Można użyć CSS dla tego

.parent_div:hover .hotqcontent {display:block;} 

Answer 6

Z .hotqcontent zaznaczania każdy element z tej klasy. Ale chcesz wybrać tylko element .hotqcontent pod elementem nadrzędnym.

$('.hotqcontent', this).toggle(); 

Answer 7

można spróbować to:

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); 
    } 
    ); 
}); 

});

Answer 8

Można to zrobić z czystym CSS (dodałem parę bitów po prostu zrobić to neater nieco za JSFIDDLE):

.parent_div{height: 50px;background-color:#ff0000;margin-top: 10px;} 
    .parent_div .hotqcontent {display: none;} 
    .parent_div:hover .hotqcontent {display:block;} 

To zapewni, że Twoja strona nadal funkcjonuje w tak samo, jeśli użytkownicy mają wyłączoną obsługę JavaScript.

Demonstracja: http://jsfiddle.net/jezzipin/LDchj/