当特定框悬停时,我想对特定类的类实现 jQuery?
我有一个父 .Box div,里面有 .BoxHover div。 我想要其中的 2 个(稍后我可能需要更多)具有相同的类。 (我不想使用 ID)。 我的目标输出是当我将鼠标悬停在 .Box div 1 上时,只有其中的 .BoxHover 会向上滑动。 我的目标输出是当我将鼠标悬停在 .Box div 2 上时,只有其中的 .BoxHover 会向上滑动。
目前,发生的情况是,当任何 .Box div 悬停时,所有 .BoxHover div 都会出现。
我的 HTML:
<!--1st pic-->
<div class="Box">
<div class="BoxPhoto">
<img src="http://placehold.it/225x225/000000/ffffff&text=instagram_photo1" />
</div>
<div class="BoxHover">
<img src="http://placehold.it/120x120/cccccc/000000&text=user_photo1" />
</div>
</div>
<!--2nd pic-->
<div class="Box">
<div class="BoxPhoto">
<img src="http://placehold.it/225x225/ff0000/ffffff&text=instagram_photo2" />
</div>
<div class="BoxHover">
<img src="http://placehold.it/120x120/cccccc/ff0000&text=user_photo2" />
</div>
</div>
我的 CSS:
.Box, .BoxHover {
height:225px;
width: 225px;
overflow: hidden;
float: left;
position: relative;
}
.BoxHover {
position: absolute;
left: 0;
bottom: 0px;
text-align: center;
margin: 20px auto -225px auto;
z-index: 3;
opacity: 0;
}
我的脚本:
$(document).ready(function () {
var flag = 1;
$(".Box").hover(function () {
if (flag == 1) {
$('.BoxHover').stop(true).animate({ 'margin-bottom': 0, 'opacity': '1' }, { queue: false, duration: 300 });
flag = 0;
}
else {
$('.BoxHover').stop(true).animate({ 'margin-bottom': -225, 'opacity': '0' }, { queue: false, duration: 300 });
flag = 1;
}
return false;
});
});
Bdw,我最近加入这里,还没有真正进入 jQuery。这是我第一次提问所以请耐心等待。而且我相信这个问题对其他人回答很有用。 :)
提前致谢!
最佳答案
问题是您的目标是 hover
处理程序中的所有 .BoxHover
元素,而不是仅针对作为后代的 .BoxHover
元素悬停的 .Box
.
$(document).ready(function () {
$(".Box").hover(function () {
$(this).find('.BoxHover').stop(true).animate({
'margin-bottom': 0,
'opacity': '1'
}, {
queue: false,
duration: 300
});
}, function () {
$(this).find('.BoxHover').stop(true).animate({
'margin-bottom': -225,
'opacity': '0'
}, {
queue: false,
duration: 300
});
});
});
演示:Fiddle
还为 mouseenter
和 mouseleave
事件使用 2 个不同的处理程序,而不是使用标志
关于javascript - 悬停特定框时如何将 jQuery 实现到特定类的类?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25519219/