Maintain mouse attention through CSS

Question

Maintain mouse attention through CSS

Currently, I am facing an issue with my login screen involving the mouseenter and mouseleave events. I have a gif image that disappears when the mouse hovers over it and reappears when the cursor moves to a different part of the page to allow users to enter their ID and password. However, there is a problem when I start typing my password and then move the mouse away, causing the caret focus to be lost.

Below are the relevant code snippets:

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

https://i.sstatic.net/0DntH.jpg

https://i.sstatic.net/OMJBK.jpg

Apologies for any language barrier. Thank you for your help.

Update: As my website only works in Internet Explorer, I attempted to modify 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";
}

Although I achieved the desired effect, it appears that opacity and zIndex are not functioning correctly in IE. Additionally, the caret focus keeps appearing even when the textbox is blocked by the image.

Please see the following image for reference:

https://i.sstatic.net/3yg1c.jpg

Note: For those who are having trouble understanding my question, please refer to the comment by Shuvro below.

javascript html css internet-explorer

Answer 1

Answer №1

Here is a suggested solution for your issue (if I understand correctly, you may need something like this): Demo

<ul class="demo-2 effect">
    <li>
       <h2 class="zero">This is an 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

Here is a suggested solution for your issue (if I understand correctly, you may need something like this): Demo

<ul class="demo-2 effect">
    <li>
       <h2 class="zero">This is an 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 3

Answer №2

If you want to achieve a specific effect using only CSS without the need for JavaScript, take a look at the code snippet below:

#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 still prefer to use JavaScript, you can incorporate the focus() method to focus on the input field when the mouse enters the designated area. For more details on focus(), you can refer to this link. Keep in mind that this solution is tailored for a single input field. If you create a fiddle on jsfiddle, I can provide a more comprehensive JavaScript solution.

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

Setting opacity can be a more reliable approach compared to visibility, as it avoids potential browser compatibility issues that may lead to 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>

Answer 4

If you want to achieve a specific effect using only CSS without the need for JavaScript, take a look at the code snippet below:

#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 still prefer to use JavaScript, you can incorporate the focus() method to focus on the input field when the mouse enters the designated area. For more details on focus(), you can refer to this link. Keep in mind that this solution is tailored for a single input field. If you create a fiddle on jsfiddle, I can provide a more comprehensive JavaScript solution.

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

Setting opacity can be a more reliable approach compared to visibility, as it avoids potential browser compatibility issues that may lead to 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>

Maintain mouse attention through CSS

Answer №1

Answer №2

Similar questions

What is the best way to implement a function on every item within a specific class?

Can you explain the functionality of `module.exports = mongoose model` in a NodeJs environment

Utilizing AngularJS and Bootstrap tooltips within a template

JavaScript Failing to Validate User Input in Form

What is the method to deactivate multiple links using jQuery?

The problem of removing issue divs persists despite Jquery's efforts

"Encountering a problem with ThreeJs graphics rendering

Ways to align one child to the end without affecting any other elements

"Are you familiar with delving into the intricacies of this

Guide to reducing the file size of your JavaScript code in Visual Studio Code

Aurelia's numerous applications spread across various pages

ng-deep is causing changes in sibling components

Issue encountered when attempting to install React modules

Can you explain the distinction between the terms "vite" and "vite preview"?

Verification of Radiobox Groups in AngularJS

Incorporate Unicode characters into the structure of an HTML tag

The afQuickField in Meteor is unable to locate the function when using the onfocus feature

Get rid of empty spaces in gridstack js

Is it possible for us to customize the angular material chip design to be in a rectangular shape

In Chrome, the $http GET request fails to send the JSESSIONID, but it functions properly on Firefox with AngularJS