Question

超级简单的代码，但我无法使其正常工作。试图隐藏并显示我的div播放器，但无法使其正常工作。

预先感谢

$(document).ready(function() {
  $(".player").mouseover(function() {
    $(".player").hide("blind", { direction: "down" }, 1000);
  });
  $(".player").mouseout(function() {
    $(".player").show("blind", { direction: "up" }, 1000);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="player">
  ssdssdffsf
</div>

Answer 1

问题是jQuery的hide()将元素的display CSS属性设置为none，导致mouseout事件被立即触发，因为元素没有不再占用任何空间，因此从技术上讲，鼠标不再位于其上。

您可以设置CSS opacity: 0。

$(document).ready(function() {
  $(".player").mouseover(function() {
    $(".player").css({
      opacity: 0
    });
  });
  $(".player").mouseout(function() {
    $(".player").css({
      opacity: '' // empty string resets a CSS property, you could also use 1 explicitly here
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="player">
  ssdssdffsf
</div>

通过鼠标悬停进行隐藏和显示不起作用。知道为什么我的代码不起作用吗？

1 个答案: