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

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屋！