Почему при наведении у меня сдвигается текст?
Доброго времени суток, я сделал простенькую вещь, при наведении на аватар выезжает твой ник и баланс,
но почему то когда анимация работает текст сдвигается на несколько пикселей, код ниже как исправить? и как добавить чтобы он так же закрывался в исходно положение ?
<div class="shopAvatar"> <img src="<?php echo $userInfo["avatar"];?>" class="profileShop"> <div class="aboutUserShop"> <h3 class="ni"><?php echo $_SESSION['username'];?></h3> <h3 class="balance"><?php echo $userInfo["balance"];?> <span style="font-size:17px;">TRX</span></h3> </div> <svg class="iconWallet" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M19 7.24997H18.75V4.99997C18.7474 4.53665 18.5622 4.09305 18.2345 3.76543C17.9069 3.43781 17.4633 3.25259 17 3.24997C16.9207 3.23552 16.8393 3.23552 16.76 3.24997L4.86 7.24997H4.75H4.59L4.42 7.30997H4.28L4.12 7.39997L4 7.56997L3.86 7.68997L3.75 7.78997L3.63 7.93997C3.598 7.96867 3.57097 8.00246 3.55 8.03997C3.51288 8.09779 3.47948 8.15791 3.45 8.21997L3.39 8.32997C3.36216 8.40179 3.33878 8.47526 3.32 8.54997C3.3245 8.5865 3.3245 8.62344 3.32 8.65997C3.30967 8.77307 3.30967 8.88687 3.32 8.99997V19C3.3221 19.4515 3.49765 19.8849 3.81034 20.2106C4.12303 20.5364 4.54895 20.7295 5 20.75H19C19.4633 20.7473 19.9069 20.5621 20.2345 20.2345C20.5622 19.9069 20.7474 19.4633 20.75 19V8.99997C20.7474 8.53665 20.5622 8.09305 20.2345 7.76543C19.9069 7.43781 19.4633 7.25259 19 7.24997ZM17.08 4.75997C17.1293 4.77814 17.1719 4.81078 17.2022 4.85362C17.2325 4.89646 17.2492 4.94748 17.25 4.99997V7.24997H9.62L17.08 4.75997ZM19.25 19C19.25 19.0663 19.2237 19.1299 19.1768 19.1767C19.1299 19.2236 19.0663 19.25 19 19.25H5C4.9337 19.25 4.87011 19.2236 4.82322 19.1767C4.77634 19.1299 4.75 19.0663 4.75 19V8.99997C4.75 8.93367 4.77634 8.87008 4.82322 8.82319C4.87011 8.77631 4.9337 8.74997 5 8.74997H19C19.0663 8.74997 19.1299 8.77631 19.1768 8.82319C19.2237 8.87008 19.25 8.93367 19.25 8.99997V19Z" fill="#000000"></path> <path d="M16.5 15.25C17.1904 15.25 17.75 14.6904 17.75 14C17.75 13.3096 17.1904 12.75 16.5 12.75C15.8096 12.75 15.25 13.3096 15.25 14C15.25 14.6904 15.8096 15.25 16.5 15.25Z" fill="#000000"></path> </g></svg> </div> |
<div class="shopAvatar"> <img src="<?php echo $userInfo["avatar"];?>" class="profileShop"> <div class="aboutUserShop"> <h3 class="ni"><?php echo $_SESSION['username'];?></h3> <h3 class="balance"><?php echo $userInfo["balance"];?> <span style="font-size:17px;">TRX</span></h3> </div> <svg class="iconWallet" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M19 7.24997H18.75V4.99997C18.7474 4.53665 18.5622 4.09305 18.2345 3.76543C17.9069 3.43781 17.4633 3.25259 17 3.24997C16.9207 3.23552 16.8393 3.23552 16.76 3.24997L4.86 7.24997H4.75H4.59L4.42 7.30997H4.28L4.12 7.39997L4 7.56997L3.86 7.68997L3.75 7.78997L3.63 7.93997C3.598 7.96867 3.57097 8.00246 3.55 8.03997C3.51288 8.09779 3.47948 8.15791 3.45 8.21997L3.39 8.32997C3.36216 8.40179 3.33878 8.47526 3.32 8.54997C3.3245 8.5865 3.3245 8.62344 3.32 8.65997C3.30967 8.77307 3.30967 8.88687 3.32 8.99997V19C3.3221 19.4515 3.49765 19.8849 3.81034 20.2106C4.12303 20.5364 4.54895 20.7295 5 20.75H19C19.4633 20.7473 19.9069 20.5621 20.2345 20.2345C20.5622 19.9069 20.7474 19.4633 20.75 19V8.99997C20.7474 8.53665 20.5622 8.09305 20.2345 7.76543C19.9069 7.43781 19.4633 7.25259 19 7.24997ZM17.08 4.75997C17.1293 4.77814 17.1719 4.81078 17.2022 4.85362C17.2325 4.89646 17.2492 4.94748 17.25 4.99997V7.24997H9.62L17.08 4.75997ZM19.25 19C19.25 19.0663 19.2237 19.1299 19.1768 19.1767C19.1299 19.2236 19.0663 19.25 19 19.25H5C4.9337 19.25 4.87011 19.2236 4.82322 19.1767C4.77634 19.1299 4.75 19.0663 4.75 19V8.99997C4.75 8.93367 4.77634 8.87008 4.82322 8.82319C4.87011 8.77631 4.9337 8.74997 5 8.74997H19C19.0663 8.74997 19.1299 8.77631 19.1768 8.82319C19.2237 8.87008 19.25 8.93367 19.25 8.99997V19Z" fill="#000000"></path> <path d="M16.5 15.25C17.1904 15.25 17.75 14.6904 17.75 14C17.75 13.3096 17.1904 12.75 16.5 12.75C15.8096 12.75 15.25 13.3096 15.25 14C15.25 14.6904 15.8096 15.25 16.5 15.25Z" fill="#000000"></path> </g></svg> </div>
.shopAvatar { display: flex; align-items: center; position: relative; width: 90px; height: 90px; background-color: #B700FF; border-radius: 100px; margin: 2%; /* float: right; */ overflow: hidden; } .profileShop { width: 90px; border: 3px solid #560875; border-radius: 50%; cursor: pointer; } .shopAvatar:hover{ transition: 2s; width: 283px; } .aboutUserShop { margin-left: 5%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; white-space: nowrap; margin-bottom: 3%; /* Добавлено для выравнивания по левому краю */ } .ni, .balance { margin-top: 5px; margin-bottom: 5px; margin-left: 0; /* Добавлено для сброса отступа слева */ word-break:keep-all; } .iconWallet{ width: 40px; margin-left: 5%; background-color: #3b0750; border-radius: 50%; padding: 10px; align-items: center; cursor: pointer; margin-bottom: 3%; } .iconWallet:hover{ transition: 2s; background-color: #8300ee; border: 3px solid #3b0750; } |
.shopAvatar { display: flex; align-items: center; position: relative; width: 90px; height: 90px; background-color: #B700FF; border-radius: 100px; margin: 2%; /* float: right; */ overflow: hidden; } .profileShop { width: 90px; border: 3px solid #560875; border-radius: 50%; cursor: pointer; } .shopAvatar:hover{ transition: 2s; width: 283px; } .aboutUserShop { margin-left: 5%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; white-space: nowrap; margin-bottom: 3%; /* Добавлено для выравнивания по левому краю */ } .ni, .balance { margin-top: 5px; margin-bottom: 5px; margin-left: 0; /* Добавлено для сброса отступа слева */ word-break:keep-all; } .iconWallet{ width: 40px; margin-left: 5%; background-color: #3b0750; border-radius: 50%; padding: 10px; align-items: center; cursor: pointer; margin-bottom: 3%; } .iconWallet:hover{ transition: 2s; background-color: #8300ee; border: 3px solid #3b0750; }
Дополнительно:
а где че происходит-то? воспользуйтесь codepen
дело в процентах margin.
а исходное положение это надо чтобы trasition был в общем классе, а не только в классе с :hover
snippet
- большое спасибо тебе, друг
Ответы:
Для .iconWallet задай прозрачный бордер. А при ховере крась.
именно он и двигает макет.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Проблема с сдвигом текста при наведении может возникать по нескольким причинам. Одной из основных причин может быть использование псевдоэлементов :hover для изменения стилей элемента при наведении курсора. Когда стили меняются при наведении, это может вызвать изменение размеров элемента или его положения, что приводит к сдвигу текста.
Для того, чтобы избежать сдвига текста при наведении, следует убедиться, что стили, применяемые при :hover, не изменяют размеры или положение элемента. Вместо этого, стоит использовать стили, которые не влияют на композицию элемента.
Например, если вы хотите изменить цвет текста при наведении, используйте свойство color вместо изменения размеров или отступов. Пример:
.my-element { color: black; transition: color 0.3s; } .my-element:hover { color: red; }
Если проблема с сдвигом текста все равно остается, стоит проверить другие стили, которые могут влиять на элемент при :hover. Также убедитесь, что у вас нет других CSS-правил, которые могут изменять композицию элемента при наведении.
Если вы продолжаете сталкиваться с проблемой, может быть полезно воспроизвести проблему на простой тестовой странице и пошагово исследовать CSS-правила, которые могут вызывать сдвиг текста при наведении.