我如何同時擁有：hover 和轉換延遲？

Question

我有一個按鈕，里面有一些 CSS：

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

我想在上面放一些 hover 效果

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

但是懸停5秒后，我希望按鈕改變它的大小和內容

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

但是擁有所有這些是行不通的。 我不想使用 Javascript，我只在做 CSS。

Answer 1

首先，如果您想在 hover 和 mouseout 上設置不同的延遲值，您需要在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;
}

如果需要，您可以添加過渡時間和緩和。