CSS:扩展 <div>从右到左显示文字 [英] CSS: Expanding a <div> from right to left to reveal text

问题描述

我想设置一个固定的<div>，包含一个图标，当鼠标悬停在上面时会从右向左展开(<div> 展开，而不是图标)，在图标左侧显示一段文字.图标的位置保持不变.这是一个草图来帮助说明我想做的事情:

I'd like to set up a fixed <div>, containing an icon, which expands from right to left when being hovered over (the <div> expands, not the icon), revealing a piece of text on the left side of the icon. The icon's position stays unchanged. Here's a sketch to help illustrate what I'd like to do:

在悬停时更改 <div> 的大小没有问题，我只需添加一个宽度更大的类(包括为展开动画制作的过渡).但我在元素的定位上挣扎.我将图标和文本(在 <span> 内)放在单独的 <div> 中，并尝试使用 flex 安排所有内容.在展开/悬停状态下，事情看起来应该是这样，但是一旦 <div> 再次缩小，包含图标和文本的两个 div 会尝试共享剩余的小空间，因此图标被截断，文本被压扁.

Changing the size of the <div> on hover is no issue, I simply add a class with a larger width (including a transition to animate the expansion). But I struggle with the positioning of the elements. I placed both the icon and the text (inside a <span>) in separate <div> and tried arranging everything using flex. In the expanded/hover state things look the way they should, but once the <div> shrinks down again, the two divs containing the icon and the text try sharing the little space that is left and hence the icon gets cut off and the text gets squished.

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

Would appreciate if someone could help me figure out how set this up the way I'd like it to be.

这是我到目前为止得到的一个 jsFiddle:Button-GrowOnHover

Here's a jsFiddle of what I got so far: 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>

推荐答案

如果您依赖 flexbox order 并且您可以将宽度更改移动到文本而不是父容器:

You can do this with only CSS if you rely on flexbox order and you can move the width changes to the text instead of the parent container:

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

这篇关于CSS:扩展 <div>从右到左显示文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！