我如何同时拥有：hover 和转换延迟？

Question

I have a button and have some CSS in it:

button {
    visibility: visible;
    padding: 12px;
    background-color: var(--dracula-accent);
    border-radius: 50%;
    margin-bottom: 2em;
}

I want to put some hover effects on it

button:hover {
    background-color: #6272a4;
}

But after 5 seconds of hovering, I want the button to change its size and content

button:hover {
    background-color: #000000;
    width: 100px;
    content: "click me"
    transition-delay: 5s;
}

But having all of them doesn't work. I don't wanna use Javascript, I'm doing CSS only.

Answer 1

First of all, you need to put your transition setting on both button and button:hover , if you want different delay values on hover and mouseout.

Secondly, if you want to have a transition on a property such as width , it works better if you specify its initial value on button .

And finally, you can achieve the desired result by using the ::after pseudo-element:

Your HTML

<button>click me</button>

Your CSS

button {
  padding: 12px;
  border-radius: 50%;
  margin-bottom: 2em;
  position: relative;
  transition-delay: 0s;
  background-color: #6272a4;
  width: 100px;
}

button::after {
  content:"test";
  position: absolute;
  top:0;
  left:0;
  right: 0;
  bottom: 0;
  padding: 12px;
  border-radius: 50%;
  background-color: red;
}

button:hover::after  {
  display: none;
}

button:hover  {
  background-color: #000000;
  width: 250px;
  transition-delay: 2s;
  color: red;
}

You can add transition time and ease if you want to.