Не вижу смысла не использовать то что есть встроенное в браузер, причем данные события являются стандартными и не использование более быстрых нативных возможносей браузера я считаю глупо.
|
Я бы предложил использовать делегирование и вешать обработчики на родителя (лучше прямо на body)
|
Цитата:
|
Цитата:
<style>
.show {
background: lightgreen;
margin: 40px;
}
.div {
background: lightgrey;
padding: 2px;
}
</style>
<div class="show">show</div>
<div class="div">
<a href="#">link1</a><br>
<a href="#">link2</a><br>
<a href="#">link3</a><br>
</div>
<script>
window.onload = function () {
document.body.onmouseout = function (e) {
e = e || event;
var rt = e.relatedTarget || e.toElement;
var target = e.target || e.srcElement;
if (target.className == 'div' && rt.parentNode.className != 'div') {
target.style.display = 'none';
}
}
document.onmouseover = function (e) {
e = e || event;
var target = e.target || e.srcElement;
if (target.className == 'show') {
target.parentNode.children[1].style.display = 'block';
}
}
}
</script>
|
Цитата:
Чот не наблюдаю эффекта - скорее всего внедрена ссылка вне данного div <!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Cообщения</title>
</head>
<body align=center>
<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>
<style type="text/css">
#LinkInserTium {
text-align:center;
margin:0 auto;
height:100px;
width:100px;
border:1px red solid;
}
#LinkInserTium:hover {
background-color:#0000CC;
}
#LinkInserTium a {
padding:0 4px;
background-color:#F7F7F7;
border:1px red solid;
}
#hover {
display:none;
}
</style>
<div id=LinkInserTium><br />
<a href="/sdfsdf/">ПриветБ</a>
</div>
<span id=hover>Мышь в DIV</span><span id=out>Мышь ушла с Блока</span>
<script type="text/javascript">
$("#LinkInserTium").mouseover(function(){
$("#hover").show();$("#out").hide();
}).mouseout(function(){
$("#hover").hide();$("#out").show();
});
</script>
</body>
</html>
|
Deff,
на таком примере и не заметишь, потому как браузер просто не успевает внести изменения в ДОМ, как снова нужно вернуть обратное, это заметно на таком примере: <!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Cообщения</title>
</head>
<body align=center>
<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>
<style type="text/css">
#LinkInserTium {
text-align:center;
margin:0 auto;
height:100px;
width:100px;
border:1px red solid;
}
#LinkInserTium:hover {
background-color:#0000CC;
}
#LinkInserTium a {
padding:0 4px;
background-color:#F7F7F7;
border:1px red solid;
}
#hover {
display:none;
}
</style>
<div id=LinkInserTium><br />
<a href="/sdfsdf/">ПриветБ</a>
</div>
<span id=hover>Мышь в DIV</span><span id=out>Мышь ушла с Блока</span>
<script type="text/javascript">
$("#LinkInserTium").mouseover(function(){
document.body.appendChild(document.createTextNode('over|'));
}).mouseout(function(){
document.body.appendChild(document.createTextNode('out|'));
});
</script>
</body>
</html>
вот тут при наведении на ссылку сработает out а потом снова over, вот именно в этом промежутке твое решение и не заметно, так как при out просто не успевает отрисоваться, как снова нужно опять отрисовывать over |
devote,
А поставь фон по hover(как у меня) и попробуй выводить и цвет фона ( если сss цвета не меняецо - мож его отслеживать на переходах ? |
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Cообщения</title>
</head>
<body align=center>
<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>
<style type="text/css">
#LinkInserTium {
text-align:center;
margin:0 auto;
height:100px;
width:100px;
border:1px red solid;
}
#LinkInserTium:hover {
background-color:#0000CC;
}
#LinkInserTium a {
padding:0 4px;
background-color:#F7F7F7;
border:1px red solid;
}
#hover {
display:none;
}
</style>
<div id=LinkInserTium><br />
<a href="/sdfsdf/">ПриветБ</a>
</div>
<span id=hover>Мышь в DIV</span><span id=out>Мышь ушла с Блока</span>
<script type="text/javascript">
$("#LinkInserTium").mouseover(function(){
var a=$(this).css("background-color")
document.body.appendChild(document.createTextNode(a+'over|'));
}).mouseout(function(){
var a=$(this).css("background-color")
document.body.appendChild(document.createTextNode(a+'out|'));
});
</script>
</body>
</html>
Цвет не меняется при данных пертурбациях - так шо он флаг - если цвет тот жа что и при hover - из .mouseout - return false; |
devote,
:) A а вообщем Ти прав .mouseleave/.mouseenter на JQ - работает и в ИЕ <!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Cообщения</title>
</head>
<body align=center>
<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>
<style type="text/css">
#LinkInserTium {
text-align:center;
margin:0 auto;
height:100px;
width:100px;
border:1px red solid;
}
#LinkInserTium:hover {
background-color:#0000CC;
}
#LinkInserTium a {
padding:0 4px;
background-color:#F7F7F7;
border:1px red solid;
}
#hover {
display:none;
}
</style>
<div id=LinkInserTium><br />
<a href="/sdfsdf/">ПриветБ</a>
</div>
<span id=hover>Мышь в DIV</span><span id=out>Мышь ушла с Блока</span>
<script type="text/javascript">
$("#LinkInserTium").mouseenter(function(){
var a=$(this).css("background-color")
document.body.appendChild(document.createTextNode(a+'over|'));
}).mouseleave(function(){
var a=$(this).css("background-color")
document.body.appendChild(document.createTextNode(a+'out|'));
});
</script>
</body>
</html>
|
Deff,
ну теперь понял разницу в событиях? mouseover, mouseout работают совсем не так как mouseenter, mouseleave... И дело совсем не в ощутимости изменения цвета иль еще чего.. а втом что при сожании на mouseenter обработчика, я знаю что оно будет вызвано лишь раз для элемента, и не произайдет делегирования, то есть оно не будет срабатывать если я мышь держу в его приделах даже на дочерних элементах... что не скажешь о событии mouseover, которое будет срабатывать даже если я не уходил с элемента за его пределы, а всего лишь перешел на дочерний элемент, это и есть делегирование.. когда событие родителя срабатывает по цепи захвата/всплытия |
| Часовой пояс GMT +3, время: 16:00. |