纯CSS实现：仅当带文本省略号的<p>悬停时显示相邻<p>？

可以通过纯CSS方案实现需求，但需要依赖现代浏览器支持的:has()伪类（目前Chrome、Edge、Safari等主流浏览器均已支持）。

实现代码 #

.container {
  width: 200px;
}

.ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  position: relative;
}

/* 默认隐藏第二个<p>元素 */
.ellipsis + p {
  display: none;
}

/* 仅当第一个<p>溢出且鼠标悬停时，显示第二个<p> */
.container:has(.ellipsis:hover) .ellipsis:is(:hover) + p {
  display: inline-block;
}

/* 关键逻辑：检测第一个<p>是否未溢出，未溢出时悬停不显示第二个<p> */
.ellipsis::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background: transparent;
}

/* 当第一个<p>未溢出时，伪元素处于元素内部，此时悬停不会触发显示第二个<p> */
.container:not(:has(.ellipsis::after:hover)) .ellipsis:hover + p {
  display: none;
}

<div class="container">
    <p class="ellipsis">Long text that might overflow and produce an ellipsis</p>
    <p>Text that shows on ellipsis hover</p>
</div>

原理说明 #

1. 基础样式：给第一个<p>设置white-space: nowrap、text-overflow: ellipsis、overflow: hidden，实现文本溢出时显示省略号。
2. 默认隐藏第二个<p>，仅在第一个<p>满足条件时显示。
3. 利用:has()伪类结合伪元素判断第一个<p>是否溢出：
   • 给第一个<p>添加一个绝对定位的伪元素，当内容未溢出时，伪元素处于元素内部；当内容溢出时，伪元素会被挤到元素外部。
   • 通过container:not(:has(.ellipsis::after:hover))判断第一个<p>未溢出的情况，此时即使悬停第一个<p>，也不会显示第二个<p>。
4. 当第一个<p>溢出且悬停时，通过相邻兄弟选择器ellipsis:hover + p触发显示第二个<p>。

内容的提问来源于stack exchange，提问作者sookie