我试图用Jquery的悬停效果替换2张图片,但我遇到了问题。当我的鼠标仍处于具有悬停效果的div中时,2张图像闪烁。当鼠标仍在div中时,我想让图像不闪烁。悬停在Jquery的2张图片上
我的jQuery代码可能是错误的地方(我是一个初学者)。
$(document).ready(function() {
$(".project").hover(function() {
$(this).hide();
$(this).next('div').show();
}, function() {
$(this).show();
$(this).next('div').hide();
});
});
.hover {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="project">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Gull_portrait_ca_usa.jpg/320px-Gull_portrait_ca_usa.jpg" alt="">
</div>
<div class="hover">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Chess_pawn.jpg/320px-Chess_pawn.jpg" alt="">
</div>
编辑:谢谢您的回答。我试试这个解决方案:
$(document).ready(function() {
$(".project").mouseover(function() {
$('.hover').show();
$('.project').hide();
});
$(".hover").mouseout(function() {
$('.project').show();
$('.hover').hide();
});
});
它部分地工作。我忘了说我有其他的项目和悬停类的div。如果我使用此代码,则显示所有我的悬停div。我想一次只适用于div上的悬停效果。
感谢
你并不需要JavaScript的jQuery的也实现这一点,例如:https://stackoverflow.com/a/10888138/4108884 –