CSS :hover activates only when the mouse is in motion

Question

CSS :hover activates only when the mouse is in motion

Looking at a simple example I put together:

HTML

<div id="sample"></div>

CSS

#sample {
    width:400px;
    height:400px;
    background-color:green;
    display:none;
}

#sample:hover{
   background-color:red;
}

It's a hidden DIV that changes color on hover.

After 2 seconds, JavaScript reveals it:

setTimeout(function() {
     document.getElementById('sample').style.display="block";
},2000)

If the mouse is over the area where the DIV will appear before it does so, it won't show the hover effect until you move the mouse. See a demo here.

Is this intentional? Is there a way to detect if the DIV is hovered without using JS?

javascript css hover styles

Answer 1

Answer №1

Although the opacity property can be used, as mentioned by @BrianPhillips, it may not function properly in IE 8. If you're looking for a workaround that involves Javascript, here's a concise solution:

window.onmousemove=function(event){
    ev = event || window.event;
    if (event.pageX <= 400 && event.pageY <= 400){
        document.getElementById('bla').style.backgroundColor= "red";
    } else {
        document.getElementById('bla').style.backgroundColor= "green";
    }
}
setTimeout(function() {
     document.getElementById('bla').style.display="block";
},2000)

Check out the demo here

Answer 2

Although the opacity property can be used, as mentioned by @BrianPhillips, it may not function properly in IE 8. If you're looking for a workaround that involves Javascript, here's a concise solution:

window.onmousemove=function(event){
    ev = event || window.event;
    if (event.pageX <= 400 && event.pageY <= 400){
        document.getElementById('bla').style.backgroundColor= "red";
    } else {
        document.getElementById('bla').style.backgroundColor= "green";
    }
}
setTimeout(function() {
     document.getElementById('bla').style.display="block";
},2000)

Check out the demo here

Answer 3

Answer №2

By setting the display to none, you are essentially removing the image from the layout, which means there is no area to hover over.

To work around this issue, you can set the background-image in your CSS to rgba(0 0 0 0); This will make the image invisible while still maintaining its presence in the DOM. You can then update your JavaScript code to:

setTimeout(function() {
     document.getElementById('bla').style.backgroundColor="green";
},2000);

Check out this JSFiddle for reference.

Answer 4

By setting the display to none, you are essentially removing the image from the layout, which means there is no area to hover over.

To work around this issue, you can set the background-image in your CSS to rgba(0 0 0 0); This will make the image invisible while still maintaining its presence in the DOM. You can then update your JavaScript code to:

setTimeout(function() {
     document.getElementById('bla').style.backgroundColor="green";
},2000);

Check out this JSFiddle for reference.

Answer 5

Answer №3

If you want to control the visibility of an element without affecting the flow of the page, one option is to use CSS opacity and set the position to absolute. This method seems to be effective:

CSS:

#example {
    width:250px;
    height:250px;
    background-color:blue;
    opacity: 0;
    position: absolute;
}

JS:

setTimeout(function() {
         document.getElementById('example').style.opacity="1";
         document.getElementById('example').style.position="relative";
},2000)

Demo

It's worth noting that using opacity allows elements to respond to events like click or hover, unlike elements with visibility: hidden or display:none. (source)

Keep in mind that opacity may not be supported in IE 8 and earlier versions.

Answer 6

If you want to control the visibility of an element without affecting the flow of the page, one option is to use CSS opacity and set the position to absolute. This method seems to be effective:

CSS:

#example {
    width:250px;
    height:250px;
    background-color:blue;
    opacity: 0;
    position: absolute;
}

JS:

setTimeout(function() {
         document.getElementById('example').style.opacity="1";
         document.getElementById('example').style.position="relative";
},2000)

Demo

It's worth noting that using opacity allows elements to respond to events like click or hover, unlike elements with visibility: hidden or display:none. (source)

Keep in mind that opacity may not be supported in IE 8 and earlier versions.

CSS :hover activates only when the mouse is in motion

Answer №1

Answer №2

Answer №3

Similar questions

Error message: 'Encountered issue with react-router-V4 and the new context API in React

Utilize DataTables with a custom search form for enhanced data filtering

Updating model values while dragging with Angular Dragular

Error during live-server npm installation: symlink issue persists even with root/admin privileges

A guide on automating the html5 color picker using input type="color" in selenium webdriver

Add text to the forefront of video content while in fullscreen mode

The type '{}' cannot be assigned to type 'IntrinsicAttributes & FieldsProp'. This error message is unclear and difficult to understand

The webpage continues to refresh after executing a JavaScript function triggered by the AJAX response

Discover the art of utilizing two distinct binding strings, wherein upon the selection of either, the alternate binding string shall automatically be

Content located on the right-hand side of the menu

What is the best way to adjust the maxHeight within AccordionDetails and enable scrolling functionality?

Vue Router generates a URL containing %2F when dealing with slug routes

What is the best way to implement the 'setInterval' function in this code to effortlessly fetch forms or data on my webpage without any need for manual refresh?

Faux CSS, every other moment appears to be unsuccessful

An issue occurred with the session being undefined in Node.js Express4

Ways to format table using flex-wrap sans the use of flexbox

Filter array to only include the most recent items with unique names (javascript)

Identifying and stopping sluggish third-party JavaScript requests

Tips for displaying user-entered information from a form after submitting it with PHP

What is the process for displaying HTML page code received from an AJAX response?