I created a very basic sample:

HTML

<div id="bla"></div>

CSS

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

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

As you can see it's a DIV that is initially hidden and changes color when mouse hovers over it.

This JavaScript unhides it after 2 seconds

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

But if you place your mouse over location where the DIV is about to appear - when it appears - it appears in unhovered state. Only when you actually move the mouse - hover effect takes place.

Here's a demo. Run it and immediately place mouse over result pane.

Is this by design? Is there a way (without JS preferable) to detect that DIV is hovered?

I created a very basic sample:

HTML

<div id="bla"></div>

CSS

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

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

As you can see it's a DIV that is initially hidden and changes color when mouse hovers over it.

This JavaScript unhides it after 2 seconds

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

But if you place your mouse over location where the DIV is about to appear - when it appears - it appears in unhovered state. Only when you actually move the mouse - hover effect takes place.

Here's a demo. Run it and immediately place mouse over result pane.

Is this by design? Is there a way (without JS preferable) to detect that DIV is hovered?

• javascript
• css
• hover
• styles

• 1 What browser are you using, for me it works fine (red when hovering, even if mouse is still on where it appears before it appears; green when not hovering) on FF, perhaps it is patibility? – Amber Commented Jan 2, 2014 at 16:18
• @Amber thanks for the pointer - in FF it does behave correctly. I am seeing the issue in Webkit browsers (Chrome, Opera, Safari) as well as IE. Interesting. – Comfortably Numb Commented Jan 2, 2014 at 16:22
• w3/TR/css3-selectors/#useraction-pseudos - the spec isn't really very particular about implementation of :hover, so I guess this is just a blind spot. I don't think it's unreasonable to call it a bug, though. – Hecksa Commented Jan 2, 2014 at 16:27
• have you tried implementing the above using jQuery? – Shourya Sharma Commented Jan 2, 2014 at 18:28
• Hmm... I tried using visibility instead, but that didn't work either. :( – hkk Commented Jan 2, 2014 at 18:30

3 Answers 3

While you can use opacity, @BrianPhillips mentioned, it doesn't work in IE 8. I don't know of a pure CSS solution, but here's a concise enough Javascript workaround:

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)

Demo

When you set display to none the image takes up no space meaining there is nowhere to hover over.

I would set the background-image in you css to rgba(0 0 0 0); making it invisible but still in the dom. You can then change your javascript to

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

http://jsfiddle/euT7k/3

You could try using CSS opacity along with setting it to position: absolute to prevent it from taking up flow on the page. This appears to work properly:

CSS:

#bla {
    width:400px;
    height:400px;
    background-color:green;
    opacity: 0;
    position: absolute;
}

JS:

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

Demo

The key here is that elements with opacity respond to events (click, hover, etc), while elements with visibility: hidden and display:none do not. (source)

Note that opacity isn't available in IE 8 and below.