Question

我有一种情况，我需要在悬停时立即更改背景颜色，并在悬停时立即恢复为原始颜色。这很简单：

#el {
    background-color: black;
}
#el:hover {
    background-color: gray;
}

但是，我遇到了一个问题，即我还需要立即在激活状态下更改背景颜色，但是在释放激活状态时使用过渡。

#el:active {
    background-color: green;
}

#el:hover:deactivate { /*does not exist*/
    background-color: gray;
    transition: background-color 1s ease;
}

#el:deactivate { /*does not exist either*/
    background-color: black;
    transition: background-color 1s ease;
}

我无法通过设置#el：hover来执行此操作，因为这样，悬停条目也会被设置为动画，而我无法在#el本身上执行此操作，因为随后还将进行动画处理。

有没有办法使用纯CSS而没有JS？

Answer 1

您可以使用:not(:active)

#el:active {
    background-color: green;
}

#el:not(:active):hover {
    background-color: gray;
    transition: background-color 1s ease;
}

#el:not(:active) {
    background-color: black;
    transition: background-color 1s ease;
}

<a href="#" id="el">active</a>

Answer 2

您可以使用伪元素对此进行仿真，并且可以管理两个不同的事物。悬停将更改背景，而活动状态将更改伪元素：

#el {
  color: white;
  background-color: black;
  border: 1px solid white;
  height: 200px;
  width: 200px;
  position:relative;
  z-index:0;
}
#el:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:transparent;
  transition:1s;
}

#el:hover {
  background-color: gray;
}

#el:active::before {
  background: green;
  transition: 0s;
}

<div id="el">
  CONTENT HERE
</div>

CSS过渡仅在无效的情况下

2 个答案: