keep mouse focus in css

Question

I have a login screen which uses mouseenter & mouseleave . I have a gif image which disappears when the mouse is hovering, and appears when the cursor is on a different part of the page, to allow the user to enter their id and password. The issue is that when I type part of the password, then move my mouse away, the caret focus is lost.

Here is my codes :

<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";
}

Sorry for my bad english. Thanks

Edited: if u see 2nd image, the caret focus still there (in textbox) when i typing the password, but when i move away my cursor to outside image, its will be like 1st image, the textbox will be blocked by gif image, when i move my cursor inside the image, then should be like 2nd image but the caret focus is disappeared like this

UPDATED : Since my website only works in IE, i tried to change my JS function

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";
}

Yes, i want like that, but its seems opacity & zIndex does not work perfectly on IE, and caret focus keep appears eventhough the textbox blocked by image.

Please refer this image :

Note : For peoples does not understand with my question, please refer to Shuvro comment below.

Answer 1

Try like this (i cant understand your question, i think you need like this one) Demo

<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

You can do what you want using only CSS. No JS needed. Check out the below code -

 #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> 

UPDATE

If you really want to keep the JS try usin the javascript focus() method on your input field inside your onmouseenter event. For more information on focus() visit this link . But the following solution will only work for a single input field. If you can create a fiddle for me in jsfiddle I can give you a complete solution using javascript too.

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();
}

But for me setting opacity is the correct way because sometimes setting visibility won't work in all browsers causing a flickering.

 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>