Контент прыгает при наведении
body {
background-color: #666e8e;
margin: 3rem;
}
#testlink {
text-decoration: none;
}
#testlink:hover .titles {
color: #3c2301;
background: linear-gradient(#7bcfd7 25%, #D2B48C 75%);
}
.test {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: auto;
height: 150px;
background: linear-gradient(#e97e7e 25%, #3bcee5 75%);
border-radius: 0% 0% 0% 0% / 0% 0% 0% 0%;
color: white;
box-shadow: 20px 20px rgba(0, 0, 0, .15);
transition: all .8s ease;
margin: 15px;
}
.test1:hover .description {
display: block;
pointer-events: auto;
}
.test:hover {
border-radius: 0% 0% 90% 90% / 0% 0% 45% 45%;
box-shadow: 10px 10px rgba(0, 0, 0, .25);
width: auto;
height: 450px;
display: flex;
justify-content: center;
align-items: normal;
}
.description {
display: none;
position: relative;
bottom: 400px;
left: 0;
width: 90%;
padding: 0px;
margin: 0px;
box-sizing: border-box;
text-align: center;
pointer-events: none;
}<div class = "test1">
<a href = "https://youtube.com" id = "testlink" target = "_blank">
<h1 class = "test">Testing Box</h1>
</a>
<p class = "description">Test description</p>
</div>Я пытался заставить его просто отображать текст, но он продолжает делать сброс. Я пробовал изменить позиции на абсолютные и просто вытащить описание из div и использовать собственный CSS-код, но все, что я пробовал, не сработало.
Ответы 2
Эффект подергивания возникает при наведении курсора на элемент из-за сдвигов макета, вызванных переходами свойств ширины и высоты и событиями указателя на тексте описания. Настройте свойство перехода, чтобы исключить изменения ширины и высоты. Укажите только необходимые свойства, такие как цвет, border-radius и box-shadow для плавного перехода, и установите pointer-events:none в «.description». Это гарантирует, что при наведении курсора не будет смещения макета, предотвращая подергивание.
Попробуйте codepen: https://codepen.io/beth-codes/pen/MWRbzbb?editors=1100
.test1:hover .description {
display: block;
pointer-events: none;
}
Я попробовал это на codepen, и подергивания прекратились, попробуйте сохранить свой старый стиль и отредактируйте только ``` .test1:hover .description ``` установите ``` pointer-events: none;```
Извините, я неправильно прочитал. Я принял ваш ответ. Я не заметил событий указателя! События указателя сработали
Итак, у вас есть этот код для макета вашего веб-сайта, но вы заметили, что когда вы наводите на что-то курсор, контент прыгает, что выглядит не очень хорошо. Мы это исправим.
В предоставленном вами коде есть часть, которая управляет отображением некоторого контента при наведении на него курсора. В частности, есть раздел, отмеченный .description. Прямо сейчас он настроен таким образом, что контент может подпрыгивать при его появлении.
Чтобы сделать его более плавным, нам нужно отрегулировать его расположение. Мы изменим его так, чтобы он отображался именно там, где мы хотим, не испортив остальную часть макета.
Вот что мы сделаем:
Вместо того, чтобы заставлять его перемещаться на определенное расстояние снизу, мы установим его в самом низу. Мы также отцентрируем его по горизонтали, чтобы он выглядел красиво и аккуратно. И чтобы гарантировать, что оно останется по центру даже при изменении размера окна, мы воспользуемся небольшим трюком, называемым преобразованием. Благодаря этим изменениям контент будет плавно появляться при наведении курсора, что придаст вашему сайту более совершенный вид.
Пожалуйста, укажите свой код
Извините, я попробовал ваше изменение, но оно не решает проблему, оно делает переход менее легким и все еще дергается.