php - 当我将 div 悬停在另一个 div 中时，javascript 触发 "onmouseover"和 "onmouseout"

Question

我正在为我的新网站设计网格布局。 PHP 代码:

echo"<div class='model_container_invisible' onMouseOver='fade(this, 0)' onMouseOut='fade(this, 1)'>";
            echo"<span class='model_title_wrapper'>";
                echo"<span class='model_title'>Ancient Dragon</span>";
                echo"<span class='model_designer'>designed by Kamiya Satoshi</span>";
            echo"</span>";
            echo"<img class='model_img' src='img/models/001.jpg' />";
echo"</div>";

这是针对网格元素的。图像的不透明度是 0.5，我想在使用 js 函数 fade() 悬停元素时更改它。这是它的代码:

function fade(elem, direction)
{
/* if(elem.className == "model_container_invisible")
    elem.className = "model_container_visible";
else
    elem.className = "model_container_invisible"; */

var img = elem.getElementsByTagName("img")[0]; //das Bild

if(direction == 0) //einblenden
{
    alert("fadein, this: "+elem);
    img.style.opacity = 0.5;

    var aktiv = window.setInterval(function() {
        img.style.opacity = String(Number(img.style.opacity) + .05);
        if(Number(img.style.opacity) >= 1.0) {
            window.clearInterval(aktiv);    

        }
    }, 8);
}
else //ausblenden
{
    alert("fadeout, this: "+elem);
    img.style.opacity = 1;

    var aktiv = window.setInterval(function() {
        img.style.opacity = String(Number(img.style.opacity) - .05);
        if(Number(img.style.opacity) <= 0.5) {
            window.clearInterval(aktiv);    

        }
    }, 16);
}
}

但是当我的鼠标指针从一个 div 移动到另一个 div 时(比如说从 model_title_wrapper 到 model_titel)，该函数会再次被调用。我不明白!

你能帮我一下吗？谢谢!

Answer 1

使用 onmouseenter 而不是 onmouseover，因为后者会在鼠标悬停在子元素中时触发该事件，而 onmouseenter 则不会(该事件将不冒泡)。

查看有关您应使用的 onmouseenter/onmouseleave 事件的信息:

http://www.quirksmode.org/js/events_mouse.html#mouseenter