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.

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

Во-вторых, вы можете применить transition: none к дочерним элементам. Как так:

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