如何同时拥有悬停和过渡延迟

Question

我有一个按钮，里面有一些CSS：

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

我想在上放一些悬停效果

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

但在悬停5秒钟后，我希望按钮更改其大小和内容

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

但拥有所有这些并不奏效。我不想使用Javascript，我只做CSS。

Answer 1

首先，如果您希望悬停和鼠标悬停的延迟值不同，则需要在button和button:hover上设置转换设置。

其次，如果希望对width等属性进行转换，那么如果在button上指定其初始值，效果会更好。

最后，使用::after伪元素可以达到预期的效果

您的HTML

<button>click me</button>

您的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;
}

如果你想的话，你可以增加过渡时间和轻松程度。