CSS: зависание работает только при перемещении мыши

Я создал очень простой пример:

HTML

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

CSS

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

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

Как вы можете видеть это DIV, который изначально скрыт и меняет цвет, когда мышь нависает над ним.

Этот JavaScript отображает его через 2 секунды

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

Но если вы наведите указатель мыши на место, где появится DIV - когда он появится - он появится в незакрытом состоянии. Только когда вы на самом деле перемещаете эффект наведения мыши, происходит.

Здесь демонстрация. Запустите его и сразу же наведите мышь на панель результатов.

Это по дизайну? Есть ли способ (без JS предпочтительнее) обнаружить, что DIV зависает?

Ответ 1

В то время как вы можете использовать opacity, упомянутый @BrianPhillips, он не работает в IE 8. Я не знаю о чистом решении CSS, но здесь достаточно краткое обходное решение Javascript:

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)

Демо

Ответ 2

Когда вы устанавливаете отображение на ничто, изображение не занимает пробела, не наступать.

Я бы установил фоновое изображение в вас css на rgba (0 0 0 0); делая его невидимым, но все еще в доме. Затем вы можете изменить свой javascript на

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

http://jsfiddle.net/euT7k/3

Ответ 3

Вы можете попробовать использовать CSS opacity вместе с настройкой его на position: absolute, чтобы предотвратить переполнение потока на странице. Это работает нормально:

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)

Демо

Ключ здесь состоит в том, что элементы с opacity отвечают на события (щелчок, наведение и т.д.), а элементы с visibility: hidden и display:none - нет. (источник)

Обратите внимание, что opacity недоступен в IE 8 и ниже.