当鼠标移动时显示gif并在鼠标移出时隐藏它

Question

我有两个gif图像，第一次点击时，它应该显示playgif.gif图像。 playgif图片有一张地图可以让菜单点击。

HTML

<div id="container">
        <div class="Object170" onmouseout='hidemenue(this)'>
            <img src="assets/images/playagif.gif" alt="" usemap="#planetmap">
            <map name="planetmap">
                <area shape="rect" coords="0,0,168,49" href="about.htm" alt="about">
                <area shape="rect" coords="0,57,168,106" href="basics.htm" alt="basics">
                <area shape="rect" coords="0,117,168,176" href="advanced.htm" alt="advanced">
                <area shape="rect" coords="0,180,168,230" href="fags.htm" alt="fags">
                <area shape="rect" coords="0,239,168,288" href="x.htm" alt="x">
                <area shape="rect" coords="0,301,168,349" href="contact.htm" alt="contact">
            </map>
        </div>
        <div class="Object181">
            <img src="assets/images/aboutagif.gif" onmouseover='showmenue(this)' width="100px" height="200px">
        </div>
    </div>

的JavaScript

function showmenue(x) {
    x.style.display = 'none';
    var playgif = document.getElementsByClassName("Object170");
    playgif[0].style.display = 'block';
    console.log("hide about and display animation");

}
function hidemenue(y) {
    y.style.display = 'none';
    var playgif = document.getElementsByClassName("Object181 > img");
    playgif[0].style.display = 'inline-block';
    console.log("hide animation and display about");

}

这是source code

当我将鼠标悬停在playgif.gif图像上时，它会再次消失！请告诉我代码中的问题在哪里！？

Answer 1

试试这个：

function showmenue(x) {
    document.getElementsByClassName("Object181")[0].style.display = 'none';
    var playgif = document.getElementsByClassName("Object170");
    playgif[0].style.display = 'block';
}
function hidemenue(y) {
    document.getElementsByClassName("Object170")[0].style.display = 'none';
    var playgif = document.getElementsByClassName("Object181");
    playgif[0].style.display = 'inline-block';
}

小提琴：http://jsfiddle.net/v6j0yr2c/2/