Div:hover моргает за пределами границ

29 апреля 2021, 05:50

Для div:hover я задаю width: 25%, но когда курсор стоит за пределами div'a начинается моргание. Как это иcправить?

Answer 1

можно использовать дополнительную обертку для div
если я правильно понял что тебе нужно то получается так.

.wrap, .test{ 
  width:500px; 
  height:100px; 
} 
 
.test { 
  background-color: #2980b9; 
  transition: all 200ms linear; 
} 
 
.wrap:hover  div { 
  width: 25%; 
  transition: all 200ms linear; 
}

<div class="wrap"> 
<div class="test">Уменьшается при наведении</div> 
</div>

либо вариант через :before без доп обертки

.test{ 
width: 300px; 
height: 100px; 
} 
 
.test:before { 
content: ""; 
display: block; 
background-color: #2980b9; 
width: 300px; 
height: 100px; 
transition: all 200ms linear; 
} 
 
.test:hover:before { 
width: 25%; 
transition: all 200ms linear; 
}