CSS 防止 div children 上的多重转换

Question

.product-item :hover{
  transition: background-color 0.5s ease-out;
  background-color: lightgrey;
  cursor: pointer;
}
.product-item * :hover{
  transition: background-color 0s;
}

似乎对 parent div 应用过渡效果也会影响 children。这会导致气泡下降效果并且看起来非常难看。它实际上看起来像 multiply children 有它们单独的转换。

我已经尝试在 children 上停止转换，但这仍然不起作用。任何的想法？谢谢

Answer 1

首先，.product-item 和 hover 之间不应该有 space。那么就不需要第二条CSS规则了。

.product-item:hover{
  transition: background-color 0.5s ease-out;
  background-color: lightgrey;
  cursor: pointer;
}

其次，您可以将 transition: none 应用于子元素。像这样：

.product-item:hover .child {
  transition: none;
}

CSS 防止 div children 上的多重转换

CSS prevent multiple transition on div children

css

css-transitions