1

新しい Web サイトのグリッド レイアウトに取り組んでいます。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_title に移動すると)、関数が再度呼び出されます。理解できません！

手伝ってくれませんか？ありがとう！

4

2 に答える 2

1

onmouseenter後者の代わりに使用するonmouseoverと、子要素にホバリングしたときにイベントが発生しますが、そうでonmouseenterはありません (イベントはバブルアップしません)。

onmouseenter/onmouseleave使用する必要があるイベントに関する情報を参照してください。

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

于 2013-05-04T13:58:30.907 に答える