Jquery getting child div within a div
I have a css div and within that div another div exists. How can I get the child div while the mouse hovers over the parent div? As here:
<div class="parent">开发者_Python百科;
<div class="child">
</div>
</div>
When the mouse gets over the parent div, I want the child div to be displayed.
This works:
$('.child').hide(); // or $('.parent').children().hide();
$('.parent').hover(
function() { $(this).children('div').show() },
function() { $(this).children('div').hide() }
);
Example at http://jsfiddle.net/4kMuD/, although that uses IDs rather than classes for the selector.
I've assumed (although you didn't say) that you want the child div to disappear again when you're no longer hovering over the parent.
Something like this?
<div id="div1">
div1
<div id="div2" style="display:none;">div2</div>
</div>
$(function(){
$("#div1").hover(function(){
$("#div2").show();
}, function(){
$("#div2").hide();
});
});
<html>
<head>
<title>Tests</title>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$('#parent').mouseover(function() {
$('#child').css('display', 'block');
})
});
</script>
<style>
#parent {width: 100px; height: 100px; background-color: yellow;}
#child { display:none; }
</style>
</head>
<body>
<div id="parent">
<div id="child">Content</div>
</div>
</body>
</html>
$('div.parent').bind('hover',
function(e) { $('div.child', this).show() },
function(e) { $('div.child', this).hide() },
);
加载中,请稍侯......
精彩评论