[JS]鼠标事件穿透的问题

今天制作登陆窗口的效果时碰到的一个问题，如下：

标签结构如下：

<div id="loginFrame">
        <form class="loginFrame-top" method="POST" action="#">
            <h3>商户卖家登陆</h3>
            <h6>请使用卖家账户可登录后进入店铺或申请开店</h6>
            <dl>
                <dt><label for="account">商家账号:</label></dt>
                <dd><input type="text" name="account" id="account"></dd>
            </dl>
            <dl>
                <dt><label for="password">登陆密码:</label></dt>
                <dd><input type="password" name="password" id="password"></dd>
            </dl>
            <dl>
                <dt><label for="checkCode">验&nbsp;&nbsp;证&nbsp;&nbsp;码:</label></dt>
                <dd><input type="text" name="checkCode" id="checkCode"><img id="codeImg" src="data:images/code.jpg"><a id="updateCode" href="#">看不清,换一张</a></dd>
            </dl>
            <input type="submit" value="确认登陆">
        </form>
        <p class="loginFrame-bottom">还没有成为我们的合作伙伴?<a href="#">快速注册</a></p>
    </div>

刚开始准备不使用js处理，直接用css来制作这个效果，但最终效果如上面的动图，有点问题，css样式如下：

#loginFrame{
    width: 20%;
    height: 300px;
    border: 1px solid red;
    margin-top: -500px;
    margin-left: 60%;
}
#loginFrame>.loginFrame-top{
    display: table;
    width: 100%;
    background-color: rgba(255,255,255,0.9);
    padding-top: 20px;
}
#loginFrame>.loginFrame-top>h3{
    text-align: center;
    margin-bottom: 10px;
}
#loginFrame>.loginFrame-top>h6{
    text-align: center;
    margin-bottom: 20px;
    color: #999999;
}
#loginFrame>.loginFrame-top>dl{
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.95);
    border: 1px solid #cecece;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1) inset;
}
#loginFrame>.loginFrame-top>dl>dt{
    float: left;
    width: 20%;
    height: 40px;
    margin-left: 2%;
}
#loginFrame>.loginFrame-top>dl>dt>label{
    line-height: 40px;
    height: 40px;
    width: 100%;
}
#loginFrame>.loginFrame-top>dl>dd{
    float: left;
    width: 76%;
    height: 40px;
    margin-left: 2%;
}
#loginFrame>.loginFrame-top>dl>dd>input{
    background-color: rgba(0, 0, 0, 0);
    border-style: none;
    font-size: 12px;
    height: 40px;
    line-height: 40px;
    width: 100%;
}
/*验证码输入栏特殊处理*/
#loginFrame>.loginFrame-top>dl:nth-of-type(3)>dd>input{
    width: 55%;
}
#loginFrame>.loginFrame-top>dl:nth-of-type(3)>dd>input+img{
    width: 45%;
    height: 40px;
}
/*此处css实现效果不理想(点击不了链接)，使用js代替*/
/*#loginFrame>.loginFrame-top>dl:nth-of-type(3)>dd>input+img:hover+a{
    display: inline-block;
}*/
#loginFrame>.loginFrame-top>dl:nth-of-type(3)>dd>a{
    display: none;
    margin-left: -45%;
    width: 45%;
    height: 40px;
    line-height: 40px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 12px;
    text-align: center;
    text-decoration: none;
}
.loginFrame-bottom{
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: rgba(0,0,0,0.5);
}

于是准备使用js来处理，修改如下：

<img id="codeImg" onmouseover="isHover()" onmouseout="isOut()" src="data:images/code.jpg">
function isHover(){
      var updateCode= document.getElementById("updateCode");
      updateCode.style.display="inline-block";
      var codeImg= document.getElementById("codeImg");
      //展开遮罩层后清除鼠标事件(或许清除的使用方式不正确)
      codeImg.onmouseover="";
}
function isOut(){
      var updateCode= document.getElementById("updateCode");
      updateCode.style.display="none";
      var codeImg= document.getElementById("codeImg");
      //隐藏遮罩层后开启鼠标事件(或许开启的使用方式不正确)
      codeImg.onmouseover="isHover()";
}

但修改过的实际效果总是与想象的不一样，鼠标悬浮时并没有按理想中的去展现遮罩层，这个事件看起来好像都没执行(原生js不是很熟悉，可能是用法上有误)，看来还是不行，再去网上各种找答案，最终找到css的一个属性pointer-events(设置或检索在何时成为属性事件的target),修改css如下:

/*此处css实现效果不理想(点击不了链接)，使用js代替*/
/*#loginFrame>.loginFrame-top>dl:nth-of-type(3)>dd>input+img:hover+a{
    display: inline-block;
    pointer-events:none;
}*/

这样的效果实现的很完美，但是也导致a标签无法点击，这样的话我就没法去根据a标签的点击去向后台发送请求了，思前想后，我居然为了找个完善的解决方法花费了将近三个小时，但很遗憾并没有找到我想要的完美的解决方法，我们分析一下导致这种问题的原因：当我们鼠标悬浮在图片上时触发了悬浮事件(此事件中打开了遮罩层),遮罩层遮挡了图片的悬浮事件区域，导致图片的鼠标移出区域事件触发(此事件隐藏了遮罩层),遮罩层的消失却又触发了图片的悬浮事件，于是开始了事件循环，问题就是这样出现的。那该怎么解决呢？如果只给图片一个悬浮事件(触发时展开a标签遮罩层)，另外给a标签一个鼠标移出事件(触发时隐藏它自己),把事件的触发分离，是否解决呢?修改后的代码:

        <img id="codeImg" onmouseover="isHover()" src="data:images/code.jpg"><a id="updateCode" onmouseout="isOut()" href="#">看不清,换一张</a>
        function isHover(){
            var updateCode= document.getElementById("updateCode");
            updateCode.style.display="inline-block";
        }
        function isOut(){
            var updateCode= document.getElementById("updateCode");
            updateCode.style.display="none";
        }

是的，问题解决了，貌似是很完善的一个解决方法，但感觉好像应该有更自然一些的解决方法，应该是我没找到，那就这样吧。

最终效果: