0

Можно ли средствами css изменить цвет элемента на какое-то время и вернуть обратно?

2
  • Можно, анимация css
    – user298256
    14 мая 2019 в 13:39
  • Например, при наведении мыши...
    – XelaNimed
    14 мая 2019 в 13:42

3 ответа 3

1

.block {
  background-color: red;
  width: 100px;
  height: 100px;
  animation-name: col;
  animation-duration: 4s;
}

@keyframes col {
  0%   {background-color:red;}
  25%  {background-color:yellow;}
  75%  {background-color:yellow;}
  100% {background-color:red;}
}
<div class="block"></div>

1

Всё же добавлю еще вариант на JavaScript. Если вдруг вас интересовало сразу переключать цвет при наведении и ровно через 5 секунд резко вырубить, и так много раз...

Думаю, нет смысла в этом ответе с нуля вас учить JS ))) Просто в коде оставил комментарии, где и что можно менять в коде, если захочется чтобы работало по другому.

Чтобы оно сработало, где-нибудь в конце страницы (обязательно ПОСЛЕ элементов, которые нужно красить), нужно поместить этот код <script> Здесь, внутри script </script>

JsFiddle

(function(){

let moo = document.getElementsByClassName('moo');
/* Выше внутри скобок записывается класс. В других местах можно не трогать 'moo' */
for(let i = 0; i < moo.length; i++){
  moo[i].addEventListener('mouseenter', function(){
    this.style.backgroundColor = 'orange'; /*Сюда записывается цвет при наведении*/
    setTimeout(function(){
      moo[i].style.backgroundColor = '#123'; /*А сюда - каким он будет через 5 секунд */
    },5000); /* 5000 = 5 секунд (в миллисекундах) */
  });
}

})();
.moo {
  width: 80px; height: 80px; margin: 5px; background-color: #123; 
  display: inline-block; cursor: pointer;
}
<div class="moo"></div>
<div class="moo"></div>
<div class="moo"></div>
<div class="moo"></div>
<div class="moo"></div>

Если захочется плавно переключать, но также через 5 секунд, просто добавляете в CSS к элементам, например, transition: 0.3s;

0

Используйте transition:

.btn {
  background-color: #ddd;
  border: none;
  color: black;
  padding: 16px 32px;
  text-align: center;
  font-size: 16px;
  margin: 4px 2px;
  transition: 2s;
}

.btn:hover {
  background-color: #3e8e41;
  color: white;
}
<button class="btn">Hover Over Me</button>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.