jQuery – изменяем вложенный блок (чилд) при наведении на родительский

На июнь 2017 года средствами CSS невозможно изменить вложенный блок (если он не является прямым наследником родительского), при наведении на родителя. На Jquery можно и очень просто.

Пример

<div class="parent">
	<div class="child-image">
		<img src="#" alt="">
	</div>
	<div class="child-title">
		<p>Lorem ipsum dolor sit amet, consectetur.</p>
	</div>
	<div class="child-description">
		Lorem ipsum dolor sit amet, consectetur 
		adipisicing elit. Rem consequatur 
		assumenda nesciunt laudantium natus, 
		sapiente dolorem in odit cumque et?
	</div>
</div>

Попробуйте перекрасить содержимое тега P внутри блока .child-title при наведении курсора на картинку из соседнего блока средствами CSS. Не получится. Для этого используется простой скрипт, как на js, так и на jq.

Но нативный javascript требует больше писанины и большинство предпочитает сторонние библиотеки — jquery

Решение

$('.parent').hover(function () {

    $(this).find('.child-title p').css({
        color: '#f50057',
        transition: '.5s'
    });
    $(this).css({
        'cursor': 'pointer'
    }).animate({
        opacity:1.0,
        duration:900
    })
    },

    function(){
        $(this).find('.child-title p').css({
            color: '#3F51B5'
        });
        $(this).animate({
            opacity:'1.0'
        })
    }

);

Логика

Первая функция начинается с $(this), который находит интересующий нас элемент — наш тег Р внутри класса .CHILD-TITLE и создает правила, которые сработают при наведении курсора в любое место родительского элемента PARENT. Она записывает CSS свойства и добавляет небольшую анимацию.

Вторая часть также начинается собственной функцией, но работает в противоположном направлении. Создает правила, которые вступят в силу при отводе курсора от родителя. Если ее не прописать, стили не вернутся на исходную.

Также можно избавиться от обработки CSS при помощи JQ и просто изменять класс — добавляя и убирая их с уже прописанными стилями и анимацией следующим образом.

$('.parent').hover(function () {

    $(this).find('.child-title p').addClass('child-title-p-hover')

	},

    function(){

         $(this).find('.child-title p')
         .removeClass('child-title-p-hover')
         .addClass('.child-title-p-base')
    }

);