Question

我写了一个两相淡入淡出按钮。我注意到声明不透明状态的顺序非常重要。

这个CSS有效：

.item .btn-remove {
  transition: opacity 0.5s ease-in-out;
  opacity: 0;
}

.item:hover .btn-remove {
  opacity: .25;
}

.item .btn-remove:hover {
  /* works here */
  opacity: 1;
}

与不起作用的版本对比：

.item .btn-remove {
  transition: opacity 0.5s ease-in-out;
  opacity: 0;
}

.item .btn-remove:hover {
  opacity: 1;
}

.item:hover .btn-remove {
  opacity: .25;
}

我可以看到声明的顺序是有道理的，但是不明白为什么这会产生影响，因为规则没有冲突（就我迄今为止对CSS的理解而言）。

请参阅我的fiddle以获取示例。

Answer 1

与:hover匹配的元素的所有祖先也将匹配:hover。虽然:hover是CSS选择器，但这是在HTML规范中指定的，而不是选择器。来自section 4.14.2 of W3C HTML5：

:hover伪类被定义为匹配元素“当用户指定具有指点设备的元素时”。出于仅定义:hover伪类的目的，HTML用户代理必须将元素视为用户指定的元素，如果它是：



用户使用指点设备指示的元素。



具有用户使用指点设备指示的后代的元素。

因此.item:hover .btn-remove规则确实适用，即使.btn-remove本身与:hover匹配（即当.btn-remove是指定的元素时）。换句话说，两个CSS规则实际上确实相互重叠，从而产生冲突。

为什么不透明度声明的顺序在这个两阶段淡入中很重要？

1 个答案: