这是jQuery函数,当我使用这个函数时,它将所有div应用于类.check
,我想只应用悬停div而不是全部。
<script type='text/javascript'>
$(document).ready(function(){
$('.pop').hover(function(){
$('.check').animate({opacity: 'show'});
}),
$('.pop').mouseout(function(){
$('.check').animate({opacity: 'hide'});
})
});
</script>
这是函数#pop的html代码是父级,它是子级.check
<div class="pop">
<div class="check">
</div>
</div>
<div class="pop">
<div class="check">
</div>
</div>
这是css代码
.pop {
clear:both;
float:left;
margin-bottom:20px;
width:100px;
height:100px;
border:solid 1px green;
position:relative;
}
.check {
background:red;
position:absolute;
width:100px;
height:100px;
display:none;
top:0;
left:0;
}
当我使用这个代码jQuery函数应用所有。检查div,我只想申请一个div。仅在悬停时检查
答案 0 :(得分:2)
您定位所有这些 - 您只需要当前悬停容器中的那个:
$(document).ready(function() {
$('.pop').mouseenter(function() {
// I've thrown in stop() - see http://api.jquery.com/stop/
$(this).find(".check").stop().animate({
opacity: 'show'
});
});
$('.pop').mouseleave(function() {
$(this).find(".check").stop().animate({
opacity: 'hide'
});
});
});
p.s。,我赞成这种更简洁的方法:
$(document).ready(function() {
$('.pop').hover(function() {
$(this).find(".check").fadeToggle()
});
});
答案 1 :(得分:1)
尝试将上下文应用于检查类的查询
<script type='text/javascript'>
$(document).ready(function(){
$('.pop').hover(function(){
$('.check', this).animate({opacity: 'show'});
}),
$('.pop').mouseout(function(){
$('.check', this).animate({opacity: 'hide'});
})
});
</script>
答案 2 :(得分:0)
Tyr this:
$(".pop").hover(
function() {
$(this).find(".check").animate({
opacity: 'show'
});
}, function() {
$(this).find(".check").animate({
opacity: 'hide'
});
});