为什么应用 CSS 过渡的选择器（“elem:hover”与“elem”）很重要？

Question

我什至不确定如何准确表达这个问题，所以让我尝试将其放入一些代码中：

假设我有一个要设置动画的 div 元素，所以我给它两种样式：

#myElement {
  width: 100px;
  height: 100px;
  background: red;
}
#myElement:hover {
  width: 150px;
  height: 150px;
  background: green;
  transition: 1s;
}

<div id="myElement"></div>

为什么我将 transition 属性应用于哪种样式很重要？

如果我将它应用到默认样式，一切正常，过渡会双向工作，当它从默认状态更改为悬停状态时，反之亦然。但是当我将它应用到 :hover 时，它只能从默认到悬停有效，但不是相反，它会立即跳回。

为什么会这样，转换的语义是什么属性？（语义在这里甚至是正确的术语吗？）

如果是：“每当将从这种状态更改为另一种状态时，应用转换。”为什么仅应用于默认时也会从悬停到默认发生过渡？

而且它不能是“每当从另一个状态改变到这种状态时，应用转换。”因为那样的话它就不能从默认到悬停了。

那是什么？

是否存在某种继承关系？

我找到了大量关于如何应用转换、语法等的资源，但我找不到任何解释此行为的内容。

编辑：我想我太专注于过渡属性而没有研究 "inheritance" 伪类。因此，如果我将过渡设置为默认状态，:hover 会继承它。我还以某种方式认为它只会在转换完成后处于 :hover 状态，这是错误的。这是一个不同的场景，没有 "inheritance" 如果有人仍然感到困惑： https://jsfiddle.net/xu6Lsexr/1/

感谢您为我澄清这一点！

Answer 1

没有 :hover 选择器的规则意味着 "regardless of whether it's :hover or not"。这并不意味着 "not :hover"——那将是 :not(:hover)。这就是过渡可以双向工作的原因。

仅应用于 :hover 时，没有为非悬停状态定义过渡，因此一旦元素停止匹配 :hover 就不会出现过渡动画。不使用悬停状态的转换，因为到应该发生转换时，元素已经已经停止匹配:hover。

Answer 2

But when I apply it to the :hover instead, it only works from default to hover, but not the other way, it just jumps back instantly. Why does this happen, what are the semantics of the transition property?

这与任何“转换语义属性”无关。

您为 #myElement:hover 定义的任何样式都会 仅在元素处于悬停状态时应用 ，而您为 #myElement 定义的任何样式都会在元素处于悬停状态时应用两种状态，元素的“正常”状态和悬停状态。

因此，如果您将 transition 放入带有选择器 #myElement 的第一条规则中，则该元素在两种状态下都具有属性 — ，而如果将其放入第二个状态中，它只有悬停状态。

一个简单的例子来告诉你这与 transition 属性本身无关：

#foo {
  font-size: 20px;
}
#foo:hover {
  background-color: red;
  border: 1px solid;
}

#bar {
  background-color: red;
  font-size: 20px;
}
#bar:hover {
  border: 1px solid;
}

现在，#foo 只有在悬停时才会有红色背景色，而 #bar 在两种状态下都有红色背景色……这与 transition 或任何其他状态相同属性.

为什么应用 CSS 过渡的选择器（“elem:hover”与“elem”）很重要？

Why does it matter which selector (“elem:hover” vs. “elem”) a CSS transition gets applied to?

css

css-selectors

pseudo-class

css-transitions