Как заставить div исчезнуть при наведении курсора, если он не мерцает при движении мыши?

Я видел ответы, предлагающие только display:none на :hover css. Но это заставляет div мерцать, когда мышь движется.Как заставить div исчезнуть при наведении курсора, если он не мерцает при движении мыши?

EDIT: Добавлена jsfiddle

источник

2011-04-30 aph

Просьба указать точные html и css, которые дают вам эту проблему, и, желательно, поместить ее в http://jsfiddle.net/ –

, вы в порядке с помощью jQuery? –

Вот пример: http: // jsfiddle.net/userdude/VvsG2/ –

display:none будет взять элемент из дерева отображения, так что теряет :hover состояние сразу, а затем вновь появляется и получает :hover снова исчезает, появляется снова, и т.д ...

Что вам нужно это:

#elem { opacity:0; filter:alpha(opacity=0); }

это оставит место пусто, так что не появится никакого мерцания. (Demoилиyours updated)

источник

2011-04-30 21:12:58 galambalazs

Все три примера (видимость, отображение, непрозрачность): http://jsfiddle.net/userdude/VvsG2/4/ –

Если у вас есть что-то вроде этого:

div:hover 
{ 
    display:none; 
}

Тогда нет никакого способа для вас, чтобы избежать мерцания. Вкл: наведение элемента становится невидимым, поэтому оно больше не витает, и оно появляется снова. Как только он появляется, он получает: hover снова и ...

Вкл: наведение элемента становится невидимым, поэтому он больше не витает, и он снова появляется. Как только он появляется, он получает: hover снова и ...

Вкл: наведение элемента становится невидимым, поэтому оно больше не витает, и оно появляется снова. Как только он появляется, он получает: hover снова и ...

Вкл: наведение элемента становится невидимым, поэтому оно больше не витает, и оно появляется снова. Как только он появляется, он получает: снова наведите курсор и ...

... Он мерцает, чтобы быть коротким. Лучшим вариантом было бы использовать непрозрачность, что-то вроде этого:

div:hover 
{ 
    opacity:0; 
}

источник

2011-04-30 21:15:21

Необязательно с CSS3, но будет работать только на последних браузерах (кроме IE). Редактировать: Вот пример @jsfiddle, используя как jquery, так и CSS3.

<html> 
<head> 
    <title>CSS3 hover</title> 
<style type="text/css"> 
#hover{ 
    width:100px; 
    height:100px; 
    background-color:#000000; 
    -webkit-transition:opacity 0.2s ease; 
    -moz-transition:opacity 0.2s ease; 
    -o-transition:opacity 0.2s ease; 
} 
#hover:hover{ 
    // Red(0-255), Blue(0-255), Green(0-255), Alpha (0-1) 
    background-color:rgba(100,100,100,0); 
    opacity:0; 
} 
</style> 
</head> 
<body> 
    <div id="hover"></div> 
</body> 
</html>

источник

2011-04-30 23:04:43 robx

+1 для эффектов перехода. Путь круто! – aph

О да, я не упомянул, что JS-метод будет работать в браузерах, CSS3 не будет работать с IE;) – robx

Используйте javascript для установки класса (например, невидимого) на объект при зависании. Затем используйте css для отображения: none, когда объект имеет этот невидимый класс. Поскольку он больше не существует, вам нужно будет проверить координаты мыши (или использовать другое событие мыши наведите курсор мыши), чтобы удалить класс и сбросить невидимый класс.

источник

2016-06-20 20:30:38 ejectamenta

Как заставить div исчезнуть при наведении курсора, если он не мерцает при движении мыши?

ответ

Смежные вопросы