прекратить мерцание div, используя CSS - PullRequest
1 голос
/ 20 марта 2020

Я хочу показать два деления в одной и той же позиции через промежутки времени, когда наведите курсор мыши, используя только CSS.

.showme{ 
    opacity:0;
    transition-property:opacity;
    transition-delay:1s;
 }
 .showhim:hover .showme{
    opacity:1;
    transition-property:opacity;
    transition-delay:1s;
 }
 .showhim:hover .ok{
    opacity:0;  
    transition-property:opacity;
    transition-delay:1s;
 }
<html>
    <head>
     <title>HI</title>
    </head>
    <body>
        <div>
    	    <div class="showhim">
            HOVER ME
            <div class="showme">hai</div>
            <div class="ok">ok</div>
    	    </div>
       </div>
    </body>
 </html>

Проблема даже в том, что скрытый div занимает место в DOM. Но я хочу, чтобы при наведении указывалось на перекрытие div и отображение одного за другим.

Используется свойство Display вместо Opacity, но оно не go хорошо с переходом.

Я не хочу использовать положение: абсолютное для положения 2-го деления над другим.

1 Ответ

1 голос
/ 20 марта 2020

Лучше всего использовать transform: translate(x, y)

Но если вы хотите, чтобы 2 деления совпали идеально, вам нужно убедиться, что вы знаете расстояния в пикселях.

Однако , если 2 элемента имеют одинаковую высоту, вы можете просто выполнить преобразование: translateY (-100%) для второго элемента.

Имейте в виду, что если позиция элемента не является ни "абсолютной", ни " исправлено ", это зарезервирует место на экране

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...