CODEWITHSUNDEEP
csscss-transitions
holyxiaoxin
holyxiaoxin

Reputation: 710

CSS prevent multiple transition on div children

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

It seems that applying the transition effect on the parent div affects the children as well. This causes a bubble down effect and looks very ugly. It actually looks like multiply children having their separate transitions.

I've tried to stop the transition on the children but this still doesn't work. Any idea? Thanks.

Upvotes: 2

Views: 1710

Answers (1)

5tormTrooper
5tormTrooper

Reputation: 923

First off, there shouldn't be a space between .product-item and hover. Then there is no need for the second CSS rule.

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

Secondly, you can apply transition: none to child elements. Like so:

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

Upvotes: 2

Related Questions