JavaScript mouseover / mouseout проблема с дочерним элементом
У меня есть маленькая проблема и я прошу вашей помощи. У меня есть div элемент, внутри которого у меня есть img элемент, такой
<div id="parent" onmouseover="MyFuncHover()" onmouseout="MyFuncOut()">
<img id="child" src="button.png" style="visibility: hidden" />
</div>
<script type="text/javascript">
function MyFuncHover() {
// Here I have some code that makes the "child" visible
}
function MyFuncOut() {
// Here I have some code that makes the "child" invisible again
}
</script>
Как вы видите, изображение ребенка div. Я хочу этого только тогда, когда покину div ребенок, чтобы исчезнуть. Тем не менее, похоже, когда я перемещаю мышь над изображением,MyFuncOut () функция вызывается (потому что, я полагаю, я оставляю div наведение изображения). Я не хочу, чтобы это произошло. Я хочу MyFuncOut () функция вызывается только тогда, когда я покидаю div зона.
Я не знал, что когда вы перемещаете мышь над дочерним элементом управления, это родитель вызывает событие mouseout (даже если я над ребенком, я все еще над родителем). Я в ловушке, и мне нужен твой хороший совет. Спасибо!
изменения
ОК событие пузырящийся не пошлет "mouseout" событие родителю, когда я "mouseout" ребенка. Он также не будет отправлять событие "mouseover "родителю, когда я" mouseover " ребенка. Это не то, что мне нужно. Мне нужно, чтобы событие "mouseout" родителя не отправлялось, когда я" наведу указатель мыши " на ребенка. Получить его? Пузырящееся событие полезно, когда я не хочу, например, событие click на ребенка распространяется на родителя, но это не мой случай. Что странно, так это то, что у меня есть другие элементы внутри того же родителя, который не запускайте событие "mouseout" родителя, когда я "наведу указатель мыши" на них.
4 ответов
вы можете использовать события "mouseenter" и "mouseleave", доступные в jquery, вот приведенный ниже код,
$(document).ready(function () {
$("#parent").mouseenter(function () {
$("#child").show();
});
$("#parent").mouseleave(function () {
$("#child").hide();
});
});
выше, чтобы прикрепить событие,
<div id="parent">
<img id="child" src="button.png" style="display:none;" />
</div>
вы можете использовать приведенное ниже решение, которое является чистым javascript, и я использовал с успехом.
var container = document.getElementById("container");
var mouse = {x: 0, y: 0};
function mouseTracking(e) {
mouse.x = e.clientX || e.pageX;
mouse.y = e.clientY || e.pageY;
var containerRectangle = container.getBoundingClientRect();
if (mouse.x > containerRectangle.left && mouse.x < containerRectangle.right &&
mouse.y > containerRectangle.top && mouse.y < containerRectangle.bottom) {
// Mouse is inside container.
} else {
// Mouse is outside container.
}
}
document.onmousemove = function () {
if (document.addEventListener) {
document.addEventListener('mousemove', function (e) {
mouseTracking(e);
}, false);
} else if (document.attachEvent) {
// For IE8 and earlier versions.
mouseTracking(window.event);
}
}
надеюсь, это поможет.
просто добавьте оператор if в свою функцию MyFuncOut, которая проверяет, что цель не является изображением
if (event.target !== imageNode) {
imageNode.style.display = 'none'
}
У меня были проблемы с этим и я не смог заставить его работать. Это то, что я сделал вместо этого, и это намного проще и не javascript, поэтому он быстрее и не может быть отключен.
div.container
{
opacity:0.0;
filter:alpha(opacity="00");
}
div.container:hover
{
opacity:1.0;
filter:alpha(opacity="100");
}
вы даже можете добавить переход css3 для непрозрачности, чтобы придать ему более плавное ощущение.