我如何同时拥有 :hover 和 transition-delay?

How do I have both :hover and transition-delay?

我有一个按钮,里面有一些 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。

首先,如果您希望在悬停和鼠标移开时有不同的延迟值,您需要将过渡设置同时设置为 buttonbutton: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;
}

如果需要,您可以添加过渡时间和缓和。