[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">验  证  码:</label></dt>
<dd><input type="text" name="checkCode" id="checkCode"><img id="codeImg" src="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="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([b]设置或检索在何时成为属性事件的target),修改css如下:[/b]

/*此处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="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";
}

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

最终效果: