1. Переходы CSS: переходы CSS можно использовать для применения эффектов анимации к элементам. Используя псевдокласс :hoverдля родительского элемента и применяя свойства перехода к дочернему элементу, вы можете создать эффект перехода при наведении курсора на родительский элемент.

.parent:hover .child {
  /* Transition properties */
  transition-property: /* specify the properties you want to animate */;
  transition-duration: /* specify the duration */;
  transition-timing-function: /* specify the timing function */;
  transition-delay: /* specify the delay */;
  /* Other styles for the child element */
}

2. CSS-анимация. Другой подход — использовать CSS-анимацию вместо переходов. Определив ключевые кадры и применив анимацию к дочернему элементу при наведении курсора на родительский элемент, вы можете добиться аналогичного эффекта.

.parent:hover .child {
  /* Animation properties */
  animation-name: /* specify the animation keyframes */;
  animation-duration: /* specify the duration */;
  animation-timing-function: /* specify the timing function */;
  animation-delay: /* specify the delay */;
  /* Other styles for the child element */
}

3. JavaScript/jQuery: если вам нужно больше контроля и гибкости, вы можете использовать JavaScript или jQuery для обработки события наведения на родительский элемент и динамического применения необходимых стилей или классов к дочернему элементу.

// Using JavaScript
var parent = document.querySelector('.parent');
var child = document.querySelector('.child');
parent.addEventListener('mouseenter', function() {
  child.classList.add('transition-effect');
});
parent.addEventListener('mouseleave', function() {
  child.classList.remove('transition-effect');
});
// Using jQuery
$('.parent').hover(function() {
  $('.child').addClass('transition-effect');
}, function() {
  $('.child').removeClass('transition-effect');
});