CSS: расширение <div>справа налево для раскрытия текста - PullRequest
Новая
       52

CSS: расширение <div>справа налево для раскрытия текста

0 голосов
/ 06 сентября 2018

Я хотел бы установить фиксированный <div>, содержащий значок, который расширяется справа налево при наведении курсора (<div> расширяется, а не значок), открывая фрагмент текста слева сторона иконы. Положение значка остается неизменным. Вот эскиз, чтобы проиллюстрировать, что я хотел бы сделать:

enter image description here

Изменение размера <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>

Ответы [ 2 ]

0 голосов
/ 06 сентября 2018

Есть лучшие варианты с css, но это помогает, если вы хотите сделать это с помощью javascript. Позвольте фактическому контейнеру, который должен вырасти, изменить ширину вместо того, который оборачивает это. 

$(document).ready(function() {
  var button = $("#myButton");

  button.mouseenter(function() {
    $('.button-text-container').addClass("grow");
  });
  button.mouseleave(function() {
    $('.button-text-container').removeClass("grow");
  });
});
.button-container {
  position: fixed;
  top: 5%;
  right: 5%;
  padding: 5px;
  background-color: tomato;
  display: flex;
  justify-content: space-between;

}

.button-text-container.grow {
  width: 300px;
}

.button-text-container {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: lightblue;
  overflow: hidden;
  width: 0px;
  transition: width 1s;
}

.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>
0 голосов
/ 06 сентября 2018

Вы можете сделать это только с CSS, если вы полагаетесь на flexbox order и можете переместить изменения ширины в текст вместо родительского контейнера: 

.button-container {
  position: fixed;
  top: 5%;
  right: 5%;
  padding: 5px;
  background-color: tomato;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
}


.button-text-container {
  order:-1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: lightblue;
  white-space:nowrap; /*Keep text always one line*/
  overflow:hidden;
  width:0;
  transition: width 1s;
}

.button-icon-container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.button-icon-container:hover + .button-text-container {
  width:200px;
}
<div class="button-container" id="myButton">
  <div class="button-icon-container">
    <img src="https://placeholder.pics/svg/100x100/7AFFA6/000000/ICON">
  </div>
  
  <div class="button-text-container">
    <span>Here comes some text.</span>
  </div>
</div>
...