1

I want to show full text on cursor hover but only after 1s delay. I tried adding transition property but it seems it doesn't apply to absolute elements. Here's the codepen demo. Here's the code:

.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>

Notice that background color is transiting properly but the full text is shown instantly as soon as I hover.

Looking for a solution to add some delay in showing full text without using any JavaScript.

Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
GorvGoyl
  • 42,508
  • 29
  • 229
  • 225
  • Is this something you're looking for? https://stackoverflow.com/questions/30089444/how-to-change-text-color-with-css-transitions – Qontrol Jan 25 '21 at 18:23
  • no, that question is about changing color i'm asking about adding delay while showing full text on hover. – GorvGoyl Jan 25 '21 at 19:04
  • Which property are you using to display the text? z-index, overflow? – XLIME Jan 25 '21 at 19:56
  • "that question is about changing color"; so... swap color with with property you want to transition. You've not specified any property to transition (a `transition-property`); that's why it's not transitioning currently (you specified the delay only). – Heretic Monkey Jan 25 '21 at 20:03
  • It looks like you're using the `overflow` property to reveal the text - which is a property assigned to the container, not the text. Have you tried putting a hover on the container? – XLIME Jan 25 '21 at 20:09
  • i tried mentioned approaches but nothing worked. i might be missing something so can you share some working snippet. here's the starting point demo https://codepen.io/jerrygoyal/pen/ZEpdqqd – GorvGoyl Jan 25 '21 at 23:15

2 Answers2

0

Finally made it work by using css animation. Working 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;
    }
  }
GorvGoyl
  • 42,508
  • 29
  • 229
  • 225
-1

Works for me, even with position:absolute;

But I went ahead and included a version that uses animation (transition too)

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;}
}
XLIME
  • 185
  • 6