从句子过渡到一个词

Question

我想要实现的是为元素宽度设置几个单词的宽度,这是在元素中心悬停单词的方式,其余部分顺利地超出边界.我还会在HTML中尽可能保持清晰,而不是使用固定像素数量的边距/宽度来定位元素.

我脑子里的一张非常糟糕的草图在这里:

* {
  transition: all 1.5s;
}

div {
  min-width: 150px;
  width: 30%;
  height: 25px;
  line-height: 25px;
  background: orange;
  text-align: center;
  overflow: hidden;
}

div:hover {
  background: white;
  word-spacing: 300px;
}

a:hover::after,
a:hover::before {
  content: ' ';
}

<div>
  <a class="afirst" href="">First</a> & <a class="asecond" href="">Second</a>
</div>

悬停时的每个单词都应该居中(当其他单词消失时,可能不会出现那些"跳跃"现在可见).你有什么想法？我很确定我尝试使用字间距的方式是错误的.

Answer 1

问题是，当增加字间距时，文本会转到新行并创建此跳转内容。因此，您可以添加white-space: nowrap，也可以使用 padding-left 来推动文本并将其置于中心：

div {
  min-width: 150px;
  width: 180px;
  height: 25px;
  line-height: 25px;
  background: orange;
  text-align: center;
  overflow: hidden;
  transition: all 0.5s;
  box-sizing: border-box;
  white-space: nowrap;
}

div:hover {
  word-spacing: 80px;
  padding-left: 80px;
  background: white;
}

<div>
  <a class="afirst" href="">First</a> & <a class="asecond" href="">Second</a>
</div>

实际上，单词间距应用于 div，因此您无法在单词上应用悬停。在第一个单词上应用此技术也更容易，因为第二个单词将因溢出而隐藏，但我不确定如何使用单词间距对第二个单词执行相同的操作。

这是关于如何在没有字间距的情况下进行操作的另一个想法。我使用了一些填充动画和伪元素来在悬停第二个单词时隐藏第一个单词。

div {
  min-width: 150px;
  width: 180px;
  height: 25px;
  line-height: 25px;
  background: orange;
  text-align: center;
  overflow: hidden;
  transition: all 0.5s;
  box-sizing: border-box;
  white-space: nowrap;
}

.afirst,
.asecond {
  position:relative;
  display: inline-block;
  transition: all 0.5s;
}

.afirst:hover {
  padding: 0 44%;
  background: white;
}
.asecond:hover {
  padding: 0 50% 0 0;
  background: white;
}
.asecond:hover::before {
  content:" ";
  position:absolute;
  left:-50%;
  width:50%;
  top:0;
  bottom:0;
  z-index:99;
  background:#fff;
}

<div>
  <a class="afirst" href="">First</a> & <a class="asecond" href="">Second</a>
</div>

我认为您可以通过使用左侧的:before元素和右侧的:after元素来隐藏其他所有内容来概括此解决方案。

这是一个包含多个单词的示例（但没有正确给出中心对齐，仍然需要改进）：

div {
  min-width: 150px;
  height: 25px;
  line-height: 25px;
  background: orange;
  text-align: center;
  overflow: hidden;
  transition: all 0.5s;
  box-sizing: border-box;
  white-space: nowrap;
}

.word {
  position: relative;
  display: inline-block;
  transition: all 0.5s;
}

.word:hover {
  background: white;
  padding: 0 40%;
}

.word:hover::before {
  content: " ";
  position: absolute;
  left: -50%;
  width: 50%;
  top: 0;
  bottom: 0;
  z-index: 99;
  background: #fff;
}

.word:hover::after {
  content: " ";
  position: absolute;
  right: -50%;
  width: 50%;
  top: 0;
  bottom: 0;
  z-index: 99;
  background: #fff;
}

<div>
  <a class="word" href="">First</a> &
  <a class="word" href="">Second</a> &
  <a class="word" href="">third</a> &
  <a class="word" href="">Fourth</a>
</div>

另一个具有完美居中但动画较少的解决方案：

div {
  position:relative;
  height: 25px;
  width:500px;
  margin:0 auto;
  line-height: 25px;
  background: orange;
  text-align: center;
  overflow: hidden;
  transition: all 0.5s;
  box-sizing: border-box;
  white-space: nowrap;
}

.word {
  position: relative;
  z-index:9;
  display: inline-block;
  transition: all 0.5s;
}

.word:hover {
  position:absolute;
  right:0;
  left:0;
  top:0;
  bottom:0;
  text-align:center;
  background: white;
  z-index:99;
}

<div>
  <a class="word" href="">First</a> &
  <a class="word" href="">Second</a> &
  <a class="word" href="">third</a> &
  <a class="word" href="">Fourth</a>
</div>