跨瀏覽器的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問題？

回答

相關問題