[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="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(設置或檢索在何時成為屬性事件的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="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";
        }

是的，問題解決了，貌似是很完善的一個解決方法，但感覺好像應該有更自然一些的解決方法，應該是我沒找到，那就這樣吧。

最終效果: