跨浏览器的jQuery问题？

我有一个简单的网页与两个div。如果您将鼠标悬停在第一个上面，则会显示第二个。当你直接进入第二个div时，它不应该隐藏，如果你去其他地方它应该。这在Chrome中是完美的，但IE和Firefox无论如何都隐藏了第二个div。我发现，这部分跨浏览器的jQuery问题？

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

回报true在IE和Firefox和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>

来源

2017-04-21 Gehtnet

可以在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>

来源

2017-04-21 08:21:31

我知道，但我想知道为什么发生这种情况 – Gehtnet

最有可能与浏览器之间的事件处理程序实现的事情。 –

跨浏览器的jQuery问题？

回答

相关问题