2017-04-21 1 views
0

J'ai une simple page web avec deux divs. Si vous passez la souris sur la première, la seconde est affichée. Quand vous allez directement sur la seconde div il ne faut pas se cacher et si vous allez ailleurs, il devrait le faire. Cela fonctionne parfaitement dans Chrome, mais IE et Firefox cachent la deuxième div, quoi qu'il arrive. J'ai découvert que la partiequestion jQuery cross-browser?

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

retours true dans IE et Firefox et false dans Chrome. Pourquoi cela arrive-t-il?

Mon code à ce jour:

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

Répondre

0

Vous pouvez y parvenir en CSS seul, qui sera plus rapide et plus fiable navigateur cross. Essayez ceci:

.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>

+0

Je sais, mais je voulais savoir pourquoi cela se produit – Gehtnet

+0

plus susceptibles de le faire avec la mise en œuvre du gestionnaire d'événements entre les navigateurs. –