在哪里应用CSS转换？

Question

是将transition属性应用于element还是应用于element:pseudo-class

更可取的是，

p {
  color: blue;
  transition: 2s 22ms
}

p:hover {
  color: red
}

或

p {
  color: blue
}

p:hover {
  color: red;
  transition: 2s 22ms
}

Answer 1

这取决于你想要实现什么。

第一种选择：

您的文本以蓝色->鼠标移动-> 转换效果 ->您的文本以红色鼠标退出-> 转换效果 ->您的文本以蓝色表示

第二种选择：

您的文本以蓝色->鼠标移动-> 转换效果 ->您的文本以红色->鼠标输出->您的文本以蓝色表示

根据你的需要选择。

Answer 2

如果您希望根据伪类的不同，转换不同，则必须使用第二个选项。但如果你不在乎，就用第一个。

input {
  color: blue
}

input:hover {
  color: red;
  transition: 2s 22ms
}

input:focus {
  color: red;
  transition: 3s
}

input:active {
  color: red;
  transition: 4s
}

Answer 3

如果将转换应用到:hover，则转换将只发生在mouseover上，而不会发生在mouseout上。将转换应用于元素，而不是它的:hover，将使转换同时发生在mouseover和mouseout上。

这是一个小提琴，帮助说明。