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

parent hover change child - 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')
    }

);

Читайте также

Похожие записи

Mobile-friendly — немного об адаптивной верстке
В эпоху mobile-friendly сайтов адаптивная верстка для сайта стала обыденностью и по умолчанию включается в базовый ценник (или же делают...
JS — делаем плавающий блок для рекламы
Заходим на сайт, скролим вниз, пока не закончатся все блоки в сайдбаре, но вот незадача — один из блоков прилип...
JS — создаем эффект мигания. Мигающие баннеры в HTML
В данной статье научимся создавать эффект мигания на javascript и jQuery (исчезание и появление) и задавать ему временной интервал. Для...
JS — автоматизация сокрытия всех внешних ссылок на странице
Задача: автоматически находить все ссылки на сайте при этом исключая внутренние и те, у которых имеется метка. Ко всем остальным добавлять...
VK — Автоматическое принятие всех заявок в друзья
Накопилось больше ста заявок в друзья, а принимать их вручную не хочется из-за неприятной особенности — появляются дополнительные опции и...

Комментарии

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *