ブラウザ間のjQueryの問題？

私は2つのdivで簡単なWebページを持っています。最初のものにマウスを合わせると、2番目のものが表示されます。 2番目のdivの直上に行くと、隠れてはならず、別の場所に行くとすべきです。これはChromeで完璧に動作しますが、IEとFirefoxは何があっても2番目のdivを隠しています。私はその部分ブラウザ間のjQueryの問題？

!$(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>

出典

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の問題？

答えて

関連する問題