挑战如下:
我在 HTML 文件中有两个层叠在一起的 div。顶部 div 使用 CSS 大部分是透明的，底部 div 有一个图像作为背景。在 mouseenter 上，我希望顶部 div 消失，在 mouseleave 上，我希望顶部 div 回来。
$(document).ready(function() {
$('.dimmer').on('mouseenter', event => {
$(this).hide();
}).on('mouseleave', event => {
$(this).show();
});
});.experience {
background: url("cmu-110.png") no-repeat center;
height: 110px;
width: 110px;
z-index: 2;
}
.dimmer {
background: rgba(238, 238, 238, .25);
position: relative;
top: -128px;
z-index: 3;
}<div>
<div class="experience"></div>
<div class="dimmer"></div>
</div>上面的 jquery 代码片段位于一个单独的文件中，并在 html 的 head 中调用。
<head>
<!--- Some head stuff like title, meta, calling css in separate file, etc --->
<!--jquery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="interaction.js"></script>
</head>完全透明:我是 jquery 新手，第一次尝试使用它。尽管完成了完整的 codecademy jquery 教程，阅读了 w3C 学校教程，搜索了其他 stackoverflow 帖子，并花费了超过合理的时间，但我似乎无法让它工作 - 可能是由于一个愚蠢的错误。 p>
感谢您的帮助!
最佳答案
我相信底部 div 上的 jquery '.on( "mouseout", handler )' 应该足以使顶部 div 可见/淡入。
这篇文章应该对您有帮助:jquery .mouseover() and .mouseout() with fade
如果没有(如果这不起作用)我会做/建议是:
- 当鼠标进入顶部 div 时，激活 setTimeout 轮询函数或每 1 秒左右运行一次的 .mouseMove，检查鼠标位置并隐藏顶部 div。
- 如果鼠标不在底部 div (mousemove) 上，则显示顶部 div 并禁用轮询。
您可以在这个论坛上搜索如何编写 setTimeout 轮询函数等。如果我周末有时间，我会尝试一下...
相信这会有所帮助。
关于javascript - jquery:在 mouseenter 上删除堆叠在另一个 <div> 之上的 <div> 并在 mouseleave 上恢复该 <div>，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49567515/