Javascript 父div MouseOut触发器函数_Javascript_Html_Css

Javascript 父div MouseOut触发器函数

javascript html css

Javascript 父div MouseOut触发器函数,javascript,html,css,Javascript,Html,Css,我有一个弹出菜单动画。在动画的最后一帧上，我隐藏动画div并显示与动画的最后一帧相同的3个按钮，只是它们是div中的3个单独按钮我希望在父div的mouseout调用roll-up函数时发生相反的情况当我滚动按钮时，它会触发div上的mouseout 我尝试过其他一些解决亲子关系的方法，但仍然无法奏效。我认为其他答案不起作用，因为div的事件侦听器我是display:none，然后display:block。 javascript // JavaScript Document //cost

我有一个弹出菜单动画。在动画的最后一帧上，我隐藏动画div并显示与动画的最后一帧相同的3个按钮，只是它们是div中的3个单独按钮

我希望在父div的

mouseout

调用roll-up函数时发生相反的情况

当我滚动按钮时，它会触发div上的

mouseout

我尝试过其他一些解决亲子关系的方法，但仍然无法奏效。我认为其他答案不起作用，因为div的事件侦听器我是

display:none，然后display:block。

javascript

// JavaScript Document
//cost
var frame = 0;
var frameWidth = 215;
var xpos3 = 0;
var div3;
var direction3 = 1;
var ypos = 648;
var div4;
var drop = 0;
var div5;

function cost(leftright) {
    direction3 = leftright;
}

//end cost

var xpos = 131;
var direction = "right";
var div;

var xpos2 = 0;
var direction2 = "left";
var div2;

function mail(leftright) {
    direction = leftright;
}

function home2(leftright) {
    direction2 = leftright;
}

function dropp() {

    drop = 0;
    direction3 = 1;

}

function gogo() {
    div = document.getElementById('mail');
    setInterval(moveMail, 1);
    div2 = document.getElementById('home');
    setInterval(moveHome, 1);
    setInterval(costDrop, 1);
    div3 = document.getElementById('cost');
    setInterval(function () { moveCost() }, 25);
    div4 = document.getElementById('drop');
    div5 = document.getElementById('dropand');
}

function moveMail() {
    if (direction == "right") {
        if (xpos != 131) {
            xpos += 1;
            div.style.backgroundPosition = (xpos) + "px";
        }
    }

    if (direction == "left") {
        if (xpos != 0) {
            xpos -= 1;
            div.style.backgroundPosition = (xpos) + "px";
        }

    }

}
//-------------------move home
function moveHome() {

    if (drop == 0) {
        if (direction2 == "right") {
            if (xpos2 != 214) {
                xpos2 += 1;
                div2.style.backgroundPosition = (xpos2) + "px";
            }
        }


        if (direction2 == "left") {
            if (xpos2 != 0) {
                xpos2 -= 1;
                div2.style.backgroundPosition = (xpos2) + "px";
            }


        }

    }

}

//----------------move cost
function costDrop() {
    if (drop == 0) {

        if (direction3 == 0) {
            if (ypos != 324) {
                ypos -= 1;
                div4.style.backgroundPosition = (0) + "px " + (-ypos) + "px";
            }
        }

        if (direction3 == 1) {
            if (ypos != 648) {
                ypos += 1;
                div4.style.backgroundPosition = (0) + "px " + (-ypos) + "px";
            }


        }

    }

}

function moveCost() {

    if (drop == 0) {
        if (direction3 == 1) {
            if (xpos3 != 0) {
                frame -= 1;
                xpos3 = frame * frameWidth;
                div3.style.backgroundPosition = -(xpos3) + "px";
            }
        }

        if (direction3 == 0) {
            if (xpos3 != 6235) {
                frame += 1;
                xpos3 = frame * frameWidth;
                div3.style.backgroundPosition = -(xpos3) + "px";
            }


        }
    }
    if ((ypos == 324) && (xpos3 == 6235)) {

        drop = 1;

        div5.style.display = "block";
    } else {
        div5.style.display = "none";
    }
}

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Web Den Design - Design Page Main</title>
    <link rel="stylesheet" type="text/css" href="main.css">
    <script src="buttons.js"></script>
</head>

<body onload="gogo()">

    <div id="load">
        <img src="bgbg.jpg" width="1920" height="2160" alt="" /><img src="blankButton.png" width="214" height="108" alt="" /><img src="blankDrop.png" width="214" height="432" alt="" /><img src="costSprite.png" width="6450" height="108" alt="" /><img src="dropDown.png" width="214" height="648" alt="" /><img src="graphicdesign2.png" width="214" height="108" alt="" /><img src="home.png" width="214" height="108" alt="" /><img src="homeFun.png" width="214" height="108" alt="" /><img src="homeUnder.png" width="214" height="108" alt="" /><img src="mail.png" width="226" height="108" alt="" /><img src="mailFun.png" width="226" height="108" alt="" /><img src="outter.png" width="225" height="549" alt="" /><img src="rollgraphic.png" width="214" height="108" alt="" /><img src="rolltech.png" width="214" height="108" alt="" /><img src="rollweb.png" width="214" height="108" alt="" /><img src="tech3.png" width="214" height="108" alt="" /><img src="webdendesign.png" width="909" height="106" alt="" /><img src="webdesign1.png" width="214" height="108" alt="" />
    </div>
    <div id="wrapper">

        <div id="webdendesign">
            <img src="webdendesign.png" width="909" height="106" alt="" />
        </div>



        <div id="drop">
        </div>

        <div id="outter" onmouseover="dropp()">

        </div>

        <div id="dropand">
            <div id="web"></div>
            <div id="graphic"></div>
            <div id="tech"></div>

        </div>

        <div id="mail">

        </div>
        <div id="mailFun">
            <img src="mailFun.png" alt="" width="226" height="108" usemap="#MapMail" />
            <map name="MapMail">
                <area alt="MapMail" shape="rect" coords="56,7,225,105" href="#" onmouseover="mail('left')" onmouseout="mail('right')">
            </map>
        </div>

        <div id="home">

        </div>

        <div id="homeFun">
            <img src="homeFun.png" alt="" width="214" height="108" usemap="#MapHome" />
            <map name="MapHome">
                <area alt="MapHome" shape="poly" coords="20,98,37,79,37,53,32,26,21,13,44,7,175,9,201,38,203,72,182,94,164,101" href="#" onmouseover="home2('right')" onmouseout="home2('left')">
            </map>
        </div>

        <div id="homeUnder">
            <img src="homeUnder.png" width="214" height="108" alt="" />
        </div>

        <div id="cost">

        </div>

        <div id="costFun">
            <img src="homeFun.png" alt="" width="214" height="108" usemap="#MapCost" />
            <map name="MapCost">
                <area alt="MapCost" shape="poly" coords="18,97,35,78,35,52,30,25,19,12,42,6,173,8,199,37,201,71,180,93,162,100" href="#" onmouseover="cost(0)" onmouseout="cost(1)">
            </map>
        </div>

        <div id="costUnder">
            <img src="costUnder.png" width="215" height="108" alt="" />
        </div>

    </div>
</body>
</html>

temp hidden outter png onmouseover，我想用div onmouseout替换它
它看起来是什么样子，隐藏的png触发菜单备份成本

如果您想让它变得简单，只需使用

jquery

而不是纯javascript。投票！是的，使用

JQuery

。如果您想使用

纯JavaScript

。是啊这也是可以做到的。所有内容请同时添加

HTML

。好的，这是HTML文档。谢谢你能粘贴完整的HTML和JavaScript吗？因为JavaScript中没有定义函数

gogo（）

，JavaScript中的函数

moveCost（）

也没有从任何地方调用。好吧，这就是全部的新手混乱。谢谢你抽出时间，先生。

@charset "utf-8";
/* CSS Document */
body {
    background-color: #000000;
}

#load {
    display: none;
}

ul {
    display: block;
}

#wrapper {
    position: relative;
    width: 1150px;
    height: 2000px;
    margin-left: auto;
    margin-right: auto;
    background-image: url(tempBG.jpg);
    background-repeat: no-repeat;
    z-index: 0;
}

#drop {
    position: absolute;
    top: 216px;
    left: 392px;
    width: 214px;
    height: 314px;
    background-image: url(dropDown.png);
    background-repeat: no-repeat;
    background-position: 0px -648px;
    z-index: 1;
}



#dropand {
    position: absolute;
    top: 106px;
    left: 392px;
    width: 214px;
    height: 432px;
    z-index: 5;
}

#outter {
    position: absolute;
    top: 80px;
    left: 375px;
    width: 264px;
    height: 482px;
    z-index: 5;
}

#button {
    position: absolute;
    top: 0px;
    width: 214px;
    height: 108px;
    background-image: url(webdesign1.png);
}

#web {
    position: absolute;
    top: 106px;
    left: 0px;
    width: 214px;
    height: 108px;
    background-image: url(webdesign1.png);
    z-index: 1;
}

    #web:hover {
        position: absolute;
        top: 106px;
        left: 0px;
        width: 214px;
        height: 108px;
        background-image: url(rollweb.png);
        z-index: 1;
    }

#graphic {
    position: absolute;
    top: 214px;
    left: 0px;
    width: 214px;
    height: 108px;
    background-image: url(graphicdesign2.png);
}

    #graphic:hover {
        position: absolute;
        top: 214px;
        left: 0px;
        width: 214px;
        height: 108px;
        background-image: url(rollgraphic.png);
    }

#tech {
    position: absolute;
    top: 322px;
    left: 0px;
    width: 214px;
    height: 108px;
    background-image: url(tech3.png);
}

    #tech:hover {
        position: absolute;
        top: 322px;
        left: 0px;
        width: 214px;
        height: 108px;
        background-image: url(rolltech.png);
    }


#mail {
    position: absolute;
    top: 106px;
    left: 0px;
    background-image: url(mail.png);
    width: 226px;
    height: 108px;
    background-position: 131px;
    background-repeat: no-repeat;
    z-index: 3;
}

#mailFun {
    position: absolute;
    top: 106px;
    left: 0px;
    width: 226px;
    height: 108px;
    z-index: 5;
}

/*-------home button-----*/
#home {
    position: absolute;
    top: 106px;
    left: 200px;
    background-image: url(home.png);
    width: 214px;
    height: 108px;
    background-position: 0px;
    background-repeat: no-repeat;
    z-index: 3;
}

#homeFun {
    position: absolute;
    top: 106px;
    left: 200px;
    width: 214px;
    height: 108px;
    z-index: 4;
}

#homeUnder {
    position: absolute;
    top: 106px;
    left: 200px;
    width: 214px;
    height: 108px;
    z-index: 2;
}

/* 215w 108h cost button x6235*/

#cost {
    position: absolute;
    top: 106px;
    left: 392px;
    background-image: url(costSprite.png);
    width: 215px;
    height: 108px;
    background-position: 0px;
    background-repeat: no-repeat;
    z-index: 2;
}

#costFun {
    position: absolute;
    top: 106px;
    left: 392px;
    width: 215px;
    height: 108px;
    z-index: 7;
}

#costUnder {
    position: absolute;
    top: 106px;
    left: 392px;
    width: 215px;
    height: 108px;
    z-index: 1;
}

#webdendesign {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
}