CSS：从右向左扩展 <div> 以显示文本

Question

我想设置一个固定的 <div>，其中包含一个图标，鼠标悬停在该图标上时会从右向左扩展（<div> 扩展，而不是图标），显示一个图标左侧的一段文字。图标的位置保持不变。这是一个草图，可以帮助说明我想做什么：

在悬停时更改 <div> 的大小没有问题，我只需添加一个具有更大宽度的 class（包括动画扩展的过渡）。但我对元素的定位感到困惑。我将图标和文本（在 <span> 内）放在单独的 <div> 中，并尝试使用 flex 安排所有内容。在 expanded/hover 状态下，事情看起来应该是这样，但是一旦 <div> 再次缩小，包含图标和文本的两个 div 尝试共享剩下的小 space，因此图标被截断，文本被压扁。

如果有人能帮我弄清楚如何按照我希望的方式进行设置，我将不胜感激。

这是我目前得到的 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>

Answer 1

如果您依赖 flexbox order，您可以使用 only CSS 来完成此操作，并且您可以将宽度更改移动到文本而不是父级容器：

.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>

Answer 2

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>

CSS：从右向左扩展 <div> 以显示文本

CSS: Expanding a <div> from right to left to reveal text

css

jquery

expand

hover

flexbox