Как сохранить состояние зависания мыши?

Я пытаюсь переход, когда линия становится длинным прямоугольником. Я хочу сделать так, чтобы при завершении перехода конечное состояние оставалось на месте даже тогда, когда мышь не зависала на нем.Как сохранить состояние зависания мыши?

Это мой текущий код:

#line { 
 
    width: 300px; 
 
    height: 1px; 
 
    background-color: darkblue; 
 
    transition: height 2s; 
 
    -webkit-transition: height 2s; 
 
} 
 

 
#line:hover { 
 
    width: 300px; 
 
    height: 200px; 
 
    background-color: darkblue; 
 
}

<div id="line"></div>

источник

2015-10-15 Asem H

Это, безусловно, является дубликатом вопрос, но пока я нахожу хорошую цель, ответом будет 'animation-fill-mode: forwards;' – TylerH

@TylerH Это для анимации. Это тоже работает для переходов? – GolezTrol

@GolezTrol Я думаю, что это так, хотя я не знаю о ': hover'. Во всяком случае, похоже, что OP фактически не занимается анимацией здесь; Я отредактирую вопрос. – TylerH

Я думаю, что лучшим решением является добавление небольшой скрипт, который добавляет класс. Класс остается после того, как unhovering:

window.addEventListener('DOMContentLoaded', function() { 
 
    document.getElementById('line').addEventListener('mouseover', function(event) { 
 
    document.getElementById('line').classList.add('activated'); 
 
    }); 
 
});

#line { 
 
    width: 300px; 
 
    height: 1px; 
 
    background-color: darkblue; 
 
    transition: height 2s; 
 
    -webkit-transition: height 2s; 
 
} 
 
#line.activated{ 
 
    width: 300px; 
 
    height: 200px; 
 
    background-color: darkblue; 
 
}

<body> 
 

 
    <div id="line"></div> 
 

 
</body>

источник

2015-10-15 19:02:05 GolezTrol

Эй, похоже, это решение, которое я искал. Спасибо –

Тот же код, но с помощью 'click' вместо события mouseover. – GolezTrol

ah спасибо большое чувак –

на засыпку способ получить этот эффект, только с помощью CSS: установить переходную задержку на элементе для огромного значения. и установите его на 0 в состоянии наведения

Когда вы наводите объект, элемент изменяется на состояние зависания, и таким образом переход происходит немедленно.

Когда вы отмените парить, не будет 9999s задержка перед началом (ну, на самом деле не навсегда, но никто не заметит)

#line { 
 
    width: 300px; 
 
    height: 10px; 
 
    background-color: darkblue; 
 
    -webkit-transition: height 1s 9999s; 
 
    transition: height 1s 9999s; 
 
} 
 
#line:hover{ 
 
    width: 300px; 
 
    height: 200px; 
 
    background-color: darkblue; 
 
    -webkit-transition-delay: 0s; 
 
    transition-delay: 0s; 
 
}

<body> 
 
    <div id="line"></div> 
 
</body>

источник

2015-10-16 13:21:05 vals

Как сохранить состояние зависания мыши?

ответ

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