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

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

8 голосов
/ 01 мая 2011

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

РЕДАКТИРОВАТЬ: Добавлено jsfiddle

Ответы [ 4 ]

12 голосов
/ 01 мая 2011

display:none извлечет элемент из дерева рендеринга, поэтому он сразу теряет состояние :hover, затем снова появляется и снова получает :hover, исчезает, появляется снова и т. Д. *

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

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

Это оставит место пустым, поэтому мерцание не появится. ( Демо или Ваш обновленный )

1 голос
/ 01 мая 2011

Опционально с 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>
0 голосов
/ 20 июня 2016

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

0 голосов
/ 01 мая 2011

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

div:hover
{
  display:none;
}

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

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

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

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

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

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

div:hover
{
  opacity:0;
}
...