$(function() {
$('#wrap').hover(
function() {
$('#wrap .image').fadeOut(100, function() {
$('#wrap .text').fadeIn(100);
});
},
function() {
$('#wrap .text').fadeOut(100, function() {
$('#wrap .image').fadeIn(100);
});
}
);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrap">
<div class="image">
<img src="http://example.com/images/image.png">
</div>
<div class="text hide">
<p>Text text text</p>
</div>
</div>
我有两个 div（其中一个用 CSS 隐藏），它们在悬停时在公共空间内交替淡入和淡出。
我正在应用这个 jQuery 代码来淡出图像 - 并在悬停时淡出文本
但问题是文本 div 会粘住并且不会淡出 - 总是鼠标移动太快。
你知道在哪里可以解决这个问题吗？
我设置了在线测试：http://paragraphe.org/stickytext/test.html http://paragraphe.org/stickytext/test.html
感谢您的任何提示
如果您的包装器上没有宽度和高度，您可能会得到一些奇怪的结果，因为一旦图像元素被删除，它就会缩小。要查看，请在包装器周围添加边框和固定高度/宽度。或者至少对图像和文本 div 使用相同的高度。
<style type="text/css">
#wrap { width: 200px; height: 200px; border: 1px solid black; }
</style>
EDITED
删除了不适用于您要完成的任务的代码示例。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
