|
Сообщение от mcreature
|
как раз там и написано.
"Не учитываются переходы внутри элемента."
|
И таки работает на 100%!
Вот пример.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='https://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
#box {
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
background-color: blue;
}
#test {
width: 50%;
height: 50%;
background-color: red;
}
.off {
display: none;
}
</style>
<script type='text/javascript'>
$(function(){
$('#box').on('mouseenter',function() {
$('#on').show();
$('#off').hide();
}).on('mouseleave',function() {
$('#off').show();
$('#on').hide();
});
});
</script>
</head>
<body>
<div id='box'>
<div id='test'></div>
</div>
<div id='on' class='off'>On</div>
<div id='off' class='off'>Off</div>
</body>
</html>
Ни чего не теряется и не пропадает...