html - 将文本悬停在单行上的容器

Question

<div class="flex-container">
  <div class="red hover flex">
    <h1>It is a long established fact that a reader will be distracted </h1>
  </div>
  <div class="blue hover flex">
    <h1>It is a long established fact that a reader will be distracted </h1>
  </div>
  <div class="green hover flex">
    <h1>It is a long established fact that a reader will be distracted </h1>
  </div>
</div>

.flex-container {
  width: 100%;
  height: 300px;
  /* create the flex container */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.flex {
  flex: 1;
}
.hover:hover {
  flex: 4;
}
/* colours */
.red {
  background-color: red;
}
.blue {
  background-color: blue;
}
.green {
  background-color: green;
}
.orange {
  background-color: orange;
}

嗨朋友们，我希望容器中的文本不要改变它的宽度，不管盒子的宽度是多少。该行应该在一行中，我需要类似下面给出的链接格式。任何人都可以帮助我...在此先感谢。 https://www.cisco.com/c/en/us/index.html

标签： htmlcssflexbox

Answer 1

将悬停的 flex 项目设置为不收缩，它将保持其文本在单行文本中。

如果我理解正确，您想要：

• 并排显示几个带有一些文本的弹性项目
• 如果其中一个弹性项目被悬停，它应该变得更大，直到它的所有文本都在一行中
• 悬停项目的大小变化应该有一个动画过渡，就像链接的例子一样

Flex 项目大部分时间都希望与它们的max-content尺寸一样大，所以我们需要做的是告诉它们在空间不足时停止收缩。我们将在:hover.

请注意，如果您强制您的文本显示在一行中，并且其他 flex 项目不能进一步缩小，那么您的 flex 项目将变得比屏幕宽，并且会溢出。

这是我上面描述的工作解决方案：

.flex-container {
  height: 300px;
  display: flex;
}
.flex-item {
  flex: 1 1 auto;
  /* transition: flex 500ms cubic-bezier(0.09, 0.76, 0.52, 1); */
  transition: flex 300ms;
}
.flex-item:hover {
  flex: 1 0 auto;
}
/* colours */
.red {
  background-color: lightcoral;
}
.blue {
  background-color: lightblue;
}
.green {
  background-color: lightseagreen;
}

<div class="flex-container">
  <div class="red flex-item">
    <h1>It is a long established fact that a reader will be distracted</h1>
  </div>
  <div class="blue flex-item">
    <h1>It is a long established fact that a reader will be distracted</h1>
  </div>
  <div class="green flex-item">
    <h1>It is a long established fact that a reader will be distracted</h1>
  </div>
</div>