Question

这是挑战：

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

感谢您的帮助！

Answer 1

我相信一个jquery＆＃39;。（＆＃34; mouseout＆＃34;，handler）＆＃39;在底部div应该足以使顶部div可见/淡入。

这篇文章可以帮助您：jquery .mouseover() and .mouseout() with fade

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

当鼠标进入顶部div时，激活setTimeout轮询功能或.mouseMove每1秒运行一次，检查鼠标位置并隐藏顶部div。
如果鼠标不在底部div（mousemove）上，则显示顶部div并禁用轮询。

你可以在这个论坛上找到如何编写setTimeout轮询功能等等。如果我有一些时间在周末，我会给它一个旋转......

相信这有帮助。

Answer 2

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

＆＃13;

Ghostdriver

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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>

Answer 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;
}

<div class="container"></div>

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

.dimmer:hover { opacity: 0 }

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

.outerDiv:hover .dimmer { opacity: 0 }

jquery：在mouseenter上删除堆叠在另一个<div>上方的<div>，并在mouseleave

4 个答案: