CSS防止div子进程多次转换

Question

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

似乎在父div上应用过渡效果也会影响孩子。这会导致气泡效应下降并且看起来非常难看。它实际上看起来像是多个孩子有各自的过渡。

我试图阻止孩子过渡，但这仍然无法奏效。任何的想法？感谢。

Answer 1

首先，不应该是.product-item和hover之间的空格。然后就不需要第二个CSS规则了。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;