Question

我有一个带有两个div的简单网页。如果你将鼠标悬停在第一个上，则会显示第二个。当你直接越过第二个div时，它不应该隐藏，如果你去其他地方它应该。这在Chrome中完美无缺，但无论如何，IE和Firefox都隐藏了第二个div。我发现了那个部分

!$(this).next().is(":hover")

在IE和Firefox中返回true，在Chrome中返回false。为什么会这样？

到目前为止我的代码：

$(document).ready(function() {
  $('.d1').hover(function() {
    if ($(this).next().hasClass('d2')) {
      if ($(this).next().css('display') == 'none') {
        $(this).next().fadeIn();
      } else {
        $(this).next().fadeOut();
      }
    }
  }, function() {
    if ($(this).next().hasClass('d2')) {
      if (!$(this).next().is(":hover")) {
        $(this).next().fadeOut();
      }
    }
  });
});

.d1 {
  height: 100px;
  width: 100px;
  background-color: red;
}

.d2 {
  height: 100px;
  width: 100px;
  background-color: green;
  display: none;
}

<!DOCTYPE html>
<html lang='de'>

<head>
  <meta charset='utf-8'>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>

<body>
  <div class="d1"></div>
  <div class="d2"></div>
</body>

</html>

Answer 1

你可以在CSS中实现这一点，这将更快，更可靠的跨浏览器。试试这个：

.d1 {
  height: 100px;
  width: 100px;
  background-color: red;
}

.d2 {
  height: 100px;
  width: 100px;
  background-color: green;
  opacity: 0;
  transition: opacity 0.5s;
}

.d1:hover +.d2, 
.d2:hover {
  opacity: 1;
}

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<div class="d1"></div>
<div class="d2"></div>

跨浏览器的jQuery问题？

1 个答案: