因此，我有两个div完全放在彼此的顶部，并且尺寸相同。默认情况下，div A应显示，但是当有人将鼠标悬停在该区域上时，div A已被编程为Jquery，.hide()并且div B已被编程为.show()。同样，悬停结束后，显示应恢复为默认设置。我已经使用.mouseover()和.mouseout()函数完成了此操作。
当我不使用show()和hide()函数传递任何参数时，它可以完美运行。但是，假设我做类似.show(800)和和的操作.hide(800)，.show("slow")并且.hide("slow")动画不断重复出现一段时间，然后停止。Div B显示，然后隐藏，并同时Div A重复显示和隐藏。的.mouseover()/.mouseout()功能施加到母divA和B两者的
我知道该.stop()功能，并且在很大程度上解决了问题，但还不能完全解决。我有超链接的文本，Div B其中显示了链接悬停动画在哪里不断闪烁Div B。
这里是网站的链接。http://nd2cindia.com/test_teams_display/（在解决此问题之前，我现在正在使用.show()和.hide()功能。）
这是我的jQuery
$(".parent").mouseover(function () {
$("> .A", this).hide("800");
$("> .B", this).show("800");
});
$(".teambox").mouseout(function () {
$("> .A", this).show("800");
$("> .B", this).hide("800");
});
这是您想要的。我在内部编写样式。可以根据需要更改样式。
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<div class="a" style="width:100px;height:100px;background-color:green; position:absolute;top:10px;left:10px;">
</div>
<div class="b" style="width:100px;height:100px;background-color:orange;position:absolute;left:10px;top:10px">
</div>
<!-- js-->
<script type="text/javascript">
$(document).ready(function(){
$(".b").mouseenter(function(){
$(this).fadeOut(1000,function(){
$(this).mouseleave(function(){
$(this).fadeIn(1000);
});
});
});
});
</script>
</body>
</html>
希望对您有帮助。我建议您使用mouseenter和mouseleave代替mouseover和mouseout。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句