jquery：在 mouseenter 上删除堆叠在另一个 <div> 上方的 <div> 并在 mouseleave 上恢复该 <div>答案

【问题标题】：jquery: Remove a <div> stacked above another <div> on mouseenter and restore that <div> on mouseleavejquery：在 mouseenter 上删除堆叠在另一个 <div> 上方的 <div> 并在 mouseleave 上恢复该 <div>
【发布时间】：2018-09-09 02:05:34
【问题描述】：

挑战如下：

我在一个 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代码sn-p在一个单独的文件中，在html的头部调用。

<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 帖子，并且花费了超过合理的时间，但我似乎无法让它工作——可能是由于一个愚蠢的错误。

感谢您的帮助！

【问题讨论】：

标签： javascript jquery css mouseenter mouseleave

【解决方案1】：

我相信底部 div 上的 jquery '.on( "mouseout", handler )' 应该足以使顶部 div 可见/淡入。

这篇文章应该对你有所帮助：jquery .mouseover() and .mouseout() with fade

如果没有（如果那不起作用）我会做/建议的是：

当鼠标进入顶部 div 时，激活每 1 秒左右运行一次的 setTimeout 轮询函数或 .mouseMove，它会检查鼠标位置并隐藏顶部 div。
如果鼠标不在底部 div (mousemove) 上，则显示顶部 div 并禁用轮询。

你可以在这个论坛上搜索如何编写一个 setTimeout 轮询函数等。如果我周末有时间我会试一试......

相信这会有所帮助。

【讨论】：

【解决方案2】：

您可以将 css 可见性属性设置为在 mouseenter 和 mouseleave 上隐藏和可见。我在两个 div 之间放置了一些空间，以使效果清晰可见。

$(document).ready(function() {

  $('.dimmer').on('mouseenter', () => {
    $('.dimmer').css("visibility","hidden");
  }).on('mouseleave', () => {
    $('.dimmer').css("visibility","visible");

  });


});

.experience {
  background: red;
  height: 110px;
  width: 110px;
  z-index: 0;
}

.dimmer {
  background: blue;
  position: absolute;
  top: -10px;
  height: 110px;
  width: 110px;
  z-index: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class="experience"></div>
  <div class="dimmer"></div>
</div>

【讨论】：

【解决方案3】：

jQuery(document).ready(function(){
        jQuery(".dimmer").on({
		mouseenter: function () {
        jQuery(this).css('opacity', '0');
		},
		mouseleave: function () {
        jQuery(this).css('opacity', '1');
		}
	});
});

.experience {
  background: url("http://lorempixel.com/400/200/") no-repeat center;
  height: 110px;
  width: 110px;
  z-index: 2;
}

.imparant{
  position:relative;
  height: 110px;
  width: 110px;
}

.dimmer {
  background: rgba(238, 238, 238, .25);
  position: absolute;
  top: 0;
  left:0;
  right:0;
  bottom:0;
  z-index: 3;
  transition:opacity 320ms;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="imparant">
  <div class="experience"></div>
  <div class="dimmer"></div>
</div>

【讨论】：

【解决方案4】：

您根本不需要为此使用 jQuery 或 javascript。您可以使用单个 div、伪元素和悬停样式来实现：

.container{
  position:relative;
  height: 110px;
  width: 110px;
  background-image: url("https://randomuser.me/api/portraits/men/41.jpg");
}
.container::before{
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0; 
  bottom: 0;
  left: 0;
  background-color: rgba(0,0,0,0.5);
  transition: opacity 0.4s;
}

.container:hover::before{
  opacity: 0;
}

&lt;div class="container"&gt;&lt;/div&gt;

如果出于某种原因您想保留额外的 div，您仍然可以这样做，但您想稍微更改 CSS 悬停规则。如果您可以将 .dimmer 移动到 .experience 之前，您可以直接在 .dimmer 元素上进行悬停：

.dimmer:hover { opacity: 0 }

否则你需要使用后代选择器：

.outerDiv:hover .dimmer { opacity: 0 }

【讨论】：

您特别询问了 jQuery 的执行方式并提到您正在学习它，所以也许您已经知道如何仅在 CSS 中执行此操作，在这种情况下，我深表歉意。