如何在悬停时显示全文，但在使用 CSS 延迟一段时间后？

Question

我想在光标悬停时显示全文，但仅在延迟 1 秒后显示。我尝试添加 transition 属性，但它似乎不适用于 absolute 元素。这是codepen demo。 代码如下：

.main {
  display: flex;
  justify-content: center;
}

.main .parent:hover .cell {
  position: absolute !important;
  z-index: 1 !important;
  padding-right: 10px;
  background: gray;
  transition-delay: 1s;
}

.main .parent {
  display: block;
  width: 200px;
  border-right: 1px solid rgb(237, 237, 236);
  white-space: nowrap;
  min-height: 32px;
  cursor: default;
  height: 32px;
  padding: 5px 8px 6px;
  font-size: 14px;
  overflow: hidden;
}

.main .parent .cell {
  line-height: 1.5;
  white-space: nowrap;
  word-break: normal;
  pointer-events: none;
}

<main class="main">
  <div class="parent">
    <span class="cell">
      In publishing and graphic design, Lorem ipsum is a placeholder text
      commonly used to demonstrate the visual form of a document or a typeface
      without relying on meaningful content.</span
    >
  </div>
</main>

请注意，背景颜色正在正确过渡，但当我悬停时会立即显示全文。

正在寻找一种解决方案，在不使用任何 JavaScript 的情况下增加显示全文的延迟。

Answer 1

最后通过使用 css animation 使其工作。工作codepan demo

@keyframes hover-delay {
  0%   {
    background: gray;
    position:absolute;
  }
  100% {
    background: gray;
  position: absolute ;}
}

 .parent {
    &:hover {
      .cell {
        z-index: 1 !important;
        padding-right: 10px;
        animation-name : hover-delay;
        animation-delay: 1s;
        animation-duration: 2s;
        // animation-iteration-count: infinite; // play animation infinite times
        
        // alternate way: retain the style values that is set by the last keyframe
         animation-fill-mode: forwards;
      }
    }
    display: block;
    width: 200px;
    border-right: 1px solid rgb(237, 237, 236);
    white-space: nowrap;
    min-height: 32px;
    cursor: default;
    height: 32px;
    padding: 5px 8px 6px;
    font-size: 14px;
    overflow: hidden;

    .cell {
      line-height: 1.5;
      white-space: nowrap;
      word-break: normal;
      pointer-events: none;
    }
  }

Answer 2

对我有用，即使是 position:absolute;

但我继续添加了一个使用动画的版本（也是过渡）

https://jsfiddle.net/56sxzcu7/

/* Using transition */

h1 {
  transition:1s;
  transition-delay:1s;
  opacity:1;
  position:absolute;
}

h1:hover {
  opacity:0.5;
}

/* Using animate */

h2:hover {
  animation: example 2s linear 2s infinite alternate;
}

@keyframes example {
  0% {opacity:1;}
  100% {opacity:0.5;}
}