Я хотел бы установить фиксированный <div>
, содержащий значок, который расширяется справа налево при наведении курсора (<div>
расширяется, а не значок), открывая фрагмент текста слева сторона иконы. Положение значка остается неизменным. Вот эскиз, чтобы проиллюстрировать, что я хотел бы сделать:
Изменение размера <div>
при наведении не представляет проблемы, я просто добавляю класс с большей шириной (включая переход для анимации расширения). Но я борюсь с позиционированием элементов. Я поместил и значок, и текст (внутри <span>
) в отдельном <div>
и попытался упорядочить все, используя flex
. В расширенном состоянии / состоянии при наведении курсора все выглядит так, как должно, но как только <div>
снова сжимается, два элемента div, содержащие значок и текст, пытаются разделить оставшееся небольшое пространство и, следовательно, значок обрезается, а текст хлюпает.
Был бы признателен, если бы кто-нибудь мог помочь мне понять, как все это устроить так, как я бы этого хотел.
Вот jsFiddle того, что я получил до сих пор: Button-GrowOnHover
Плюс сам код:
$(document).ready(function() {
var button = $("#myButton");
button.mouseenter(function() {
$(this).addClass("grow");
});
button.mouseleave(function() {
$(this).removeClass("grow");
});
});
.button-container {
position: fixed;
top: 5%;
right: 5%;
width: 100px;
padding: 5px;
background-color: tomato;
display: flex;
justify-content: space-between;
overflow: hidden;
transition: width 1s;
}
.button-container.grow {
width: 300px
}
.button-text-container {
display: flex;
align-items: center;
justify-content: center;
background-color: lightblue;
}
.button-icon-container {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button-container" id="myButton">
<div class="button-text-container">
<span>Here comes some text.</span>
</div>
<div class="button-icon-container">
<img src="https://placeholder.pics/svg/100x100/7AFFA6/000000/ICON">
</div>
</div>