Hover button Transition Delay-CodePudding

I'm maybe 2 weeks into coding so apologies if I don't format correctly (code and question itself).I am trying to set a delay for the time it takes the buttons to switch text. Thank you for the help!

I've tried googling this and youtube with no luck. I have tried adding transition transition-delay

body{
  background-color: black;
}
.column{
  position: fixed;
  left:0;
  bottom:0;
  top:55px;
  width:72px;
  z-index: 200;
  padding-top: 20px;
}
.about,
.skills {
font-size:72px;
width: 10em;
text-align: left;
border:none;
background-color: black;
color:red;
}

.about:hover span {
display: none;
}

.about:hover:after {
transition-delay: 3s;
content: "ABOUT";

}

.skills:hover span {
display: none
}

.skills:hover:after {
content: "SKILLS"
}

  <h1>
    <div >
      <button  data-hover="ABOUT">
        <span>
          I
        </span>
      </button>
      <button >
        <span>
          AM
        </span>
      </button>
    </div>
  </h1>

CodePudding user response：

First of all, I would look into the html semantics a bit. Having div tags inside an h1 doesn't make much sense. So consider changing the h1 to a div. Also, the 3s delay is enormous. Think of something a bit faster, like 300ms.

The real issue is that display states and transition don't really work together since it swaps between states like block and none. But there are other solutions to this. You could use position: relative; on a parent div and give the children position: absolute. This way, you could make the transitions with opacity instead.

I have made an example for you so you can get the idea. I have commented on the CSS so you can follow up on what is happening.

/* Lets give our spans some styling: */
span{
  font-size: 30px;
  font-weight: 600;
  font-family: sans-serif;
  margin-bottom: 2rem;
  max-width: 60ch;
}

/* Lets make the "container" position relative, 
   this way the absolute children will stay inside the container */
.hover-effect{
  position: relative;
}

/* Let's give both of the children position absolute */
.hover-effect span{
    position:   absolute;
    color:      black;
    opacity:    100%;
    transition: 300ms ease-in 300ms; /* Delay: 300ms*/
}

/* Let’s override the previous.
   This actually happens when we remove the hover, so we want to
   trigger this animation first, hence the delay of 0ms*/
.hover-effect span.on-hover{
  opacity:      0%;
  transition:   300ms ease-in 0ms;
}

/* When we hover the container, let's change both spans */
.hover-effect:hover span{
    color:              red;
    opacity:            0%;
    transition-delay:   0ms;
}

/* Let’s override the previous.
   When we hover on the container, the span with the class "on-hover"
   becomes visible, and we wait 300ms before it happens so that the 
   "disappearing" animation gets its time to trigger. */
.hover-effect:hover span.on-hover{
    opacity:            100%;
    transition-delay:   300ms;
}

<div >
     <span>Try and hover over me</span>
     <span >Try and remove the hover</span>
</div>