將鼠標焦點保持在CSS中

Question

我有一個使用mouseenter和mouseleave的登錄屏幕。 我有一個gif圖像，當鼠標懸停時會消失，而當光標位於頁面的不同部分時會出現，以便用戶輸入其ID和密碼。 問題是，當我輸入部分密碼，然后將鼠標移開時，插入符號焦點會丟失。

這是我的代碼：

<div ID="contDefine" class="wipeForward" onmouseenter="fnToggleDefine1()" onmouseleave="fnToggleDefine2()">
<div ID="oDivDefine1" STYLE="position:absolute; width:454px; height:262px; background:#eff0f0 url('image/outlogin.gif') top repeat-x; ">   </div>
<div ID="oDivDefine2" STYLE="visibility:hidden; position:absolute; width:454px; height:262px; background: #eff0f0 url('image/inlogin.gif') top repeat-x; ">

function fnToggleDefine1() {
    if(agent.is_ie && !agent.is_ie10){
        contDefine.className='wipeForward';
        contDefine.filters[0].Apply();
        contDefine.filters[0].Play(duration=1);
    }
    oDivDefine2.style.visibility="visible"; 
    oDivDefine1.style.visibility="hidden";
}

function fnToggleDefine2() {
    if(agent.is_ie && !agent.is_ie10){
        contDefine.className='wipeReverse';
        contDefine.filters[0].Apply();
        contDefine.filters[0].Play(duration=1);
    }
    oDivDefine2.style.visibility="hidden"; 
    oDivDefine1.style.visibility="visible";
}

對不起，我的英語不好。 謝謝

編輯：如果您看到第二張圖片，當我輸入密碼時，插入符號焦點仍在（文本框中），但是當我將光標移到外面的圖片時，它就像第一張圖片，文本框將被gif圖片遮擋，當我在圖像中移動光標時，應該像第二幅圖像，但插入符號焦點就這樣消失了

更新：由於我的網站僅適用於IE，因此我嘗試更改JS函數

function fnToggleDefine2() {
    if(agent.is_ie && !agent.is_ie10){
        contDefine.className='wipeReverse';
        contDefine.filters[0].Apply();
        contDefine.filters[0].Play(duration=1);
    }
    oDivDefine2.style.opaciy="0";
    oDivDefine2.style.zIndex="-999";
    oDivDefine1.style.visibility="visible";
}

是的，我想要那樣，但是它的不透明度和zIndex似乎無法在IE上完美運行，即使文本框被圖像阻止，插入符仍會保持插入狀態。

請參考這張圖片：

注意：如果人們對我的問題不了解，請參閱下面的Shuvro評論。

Answer 1

嘗試這樣（我無法理解您的問題，我認為您需要像這樣的演示）

<ul class="demo-2 effect">
    <li>
       <h2 class="zero">This is example!</h2>
       <p class="zero">Happy New Year</p>
    </li>
    <li><img class="top" src="http://s9.postimg.org/z8g84vbej/happy_new_year_2016_wallpapers.jpg" alt=""/></li>
</ul>

的CSS

.demo-2 {
    position:relative;
    width:300px;
    height:200px;
    overflow:hidden;
    float:left;
    margin-right:20px;
    background-color:rgba(26,76,110,0.5)
}
.demo-2 p,.demo-2 h2 {
    color:#fff;
    padding:10px;
    left:-20px;
    top:20px;
    position:relative
}
.demo-2 p {
    font-family:'Lato';
    font-size:12px;
    line-height:18px;
    margin:0
}
.demo-2 h2 {
    font-size:20px;
    line-height:24px;
    margin:0;
    font-family:'Lato'
}
.effect img {width:200px; height:200px;
    position:absolute;
    left:0;
    bottom:0;
    cursor:pointer;
    margin:-12px 0;
    -webkit-transition:bottom .3s ease-in-out;
    -moz-transition:bottom .3s ease-in-out;
    -o-transition:bottom .3s ease-in-out;
    transition:bottom .3s ease-in-out
}
.effect img.top:hover {
    bottom:-96px;
    padding-top:100px
}
h2.zero,p.zero {
    margin:0;
    padding:0
}

Answer 2

您可以僅使用CSS來完成所需的操作。 不需要JS。 看看下面的代碼-

 #box { width: 342; height: 160; } #box:hover > #imgover { opacity: 0; z-index: -999; } #imgover { width: 342; height: 160; position: absolute; } #input-field { margin: 20px 0 0 20px; } 

 <div id="box"> <img src="http://thumbs.dreamstime.com/t/demo-sign-d-letter-blocks-forming-isolated-white-background-36021240.jpg" id="imgover" /> <input type="text" id="input-field" /> </div> 

更新

如果您確實想保留JS，請嘗試在onmouseenter事件內輸入字段上的javascript focus()方法中使用我們。 有關focus()更多信息，請訪問此鏈接 。 但是以下解決方案僅適用於單個輸入字段。 如果您可以在jsfiddle中為我創建小提琴，我也可以使用javascript為您提供完整的解決方案。

function fnToggleDefine1() {    
if(agent.is_ie && !agent.is_ie10){
    contDefine.className='wipeForward';
    contDefine.filters[0].Apply();
    contDefine.filters[0].Play(duration=1);
}
oDivDefine2.style.visibility="visible"; 
oDivDefine1.style.visibility="hidden";
var inputField = document.getElementById("YOUR-INPUT-FIELD-ID-TO-FOCUS-ON");
inputField.focus();
}

但是對我來說，設置不透明度是正確的方法，因為有時設置可見性並不能在所有瀏覽器中都起作用，從而導致閃爍。

 function hideBox(box) { var container = document.getElementById("input-container"); var image = document.getElementById("imgover"); container.style.opacity = "1"; image.style.opacity = "0"; image.style.zIndex = "-999"; } function showBox(box) { var container = document.getElementById("input-container"); var image = document.getElementById("imgover"); container.style.opacity = "0"; image.style.opacity = "1"; image.style.zIndex = "999"; } 

 #box { width: 342; height: 160; } #imgover { width: 342; height: 160; position: absolute; } 

 <div id="box" onmouseenter="hideBox(this)" onmouseleave="showBox(this)"> <img src="http://thumbs.dreamstime.com/t/demo-sign-d-letter-blocks-forming-isolated-white-background-36021240.jpg" id="imgover" /> <div id="input-container"> <input type="text" id="input-field" /> </div> </div>