CSS :hover works only when mouse moves

Question

I created a very basic sample:

HTML

CSS

#bla {         


        

Answer 1

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