Фон Div-переход цвета не работает

#html #css #reactjs

#HTML #css #reactjs

Вопрос:

Я добавил переход к своим кнопкам, и он работает нормально

У меня есть div с шириной / высотой, определяемой встроенно через props (react), код перехода очень похож на кнопку, поэтому я не уверен, почему он не работает. Для этого примера я просто хочу простой переход с белого фона на красный при наведении курсора мыши.

Я изначально установил цвет фона на белый и: наведите курсор на красный:

 background-color: red;

transition: background-color 0.5s;
-webkit-transition: background-color 0.5s;
-o-transition: background-color 0.5s;
-moz-transition: background-color 0.5s;

Однако это приводит к ожидаемому результату.. без какого-либо перехода

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

Спасибо

1. вам нужно показать больше кода — невозможно помочь без информации

2. @Tom к вашему сведению, shouldiprefix.com/#transitions

3. Спасибо обоим, подумал, что это очень странно, и понял, что после публикации я использовал библиотеку AOS для этого элемента

Ответ №1:

Спасибо за быстрые ответы. Приношу свои извинения за недостающие детали. Оказывается, это было потому, что библиотека AOS (анимация при прокрутке) вызывает проблемы при выполнении переходов в одном и том же элементе. Я решил это, обернув div в другой div.

Ответ №2:

Было бы лучше, если бы вы показывали больше того, что у вас есть при наведении курсора, но я предполагаю, что, возможно, у вас есть код, задающий что-то вроде этого:

 .box{
    background-color: red;
}
.box:hover{
   transition: background-color 0.5s;
   -webkit-transition: background-color 0.5s;
   -o-transition: background-color 0.5s;
   -moz-transition: background-color 0.5s;
}

Это должно быть вот так:

 .box{
   transition: background-color 0.5s;
   -webkit-transition: background-color 0.5s;
   -o-transition: background-color 0.5s;
   -moz-transition: background-color 0.5s;
}
.box:hover{
    background-color: red;
}

Ответ №3:

Обычно переход присваивается элементу.

Попробуйте это вместо —

Css

 div {
  background-color: white;  
  transition: background-color 0.5s ease-in-out;
}
div:hover {
  background-color: red;
}

Дерзость —

 div {
  background-color: white;  
  transition: background-color 0.5s ease-in-out;
  amp;:hover {
    background-color: red;    
  }
}

Ответ №4:

Попробуйте это, если set initially white для фона div. По умолчанию он белый. итак, мы можем добавить transition , затем hover background change в red

CSS

 .box{ 
     transition: background-color 0.5s; 
 }
.box:hover{ 
     background-color: red; 
 }

SCSS

 .box{ 
     transition: background-color 0.5s; 
   amp;:hover{ 
     background-color: red; 
   }
}

Попробуйте этот фрагмент.

 .box{
  transition: background-color 0.5s;
}
.box:hover{
    background-color: red;
}

 <div class="box" style="width:100vh;height:100vh;"></div>

Развернуть фрагмент