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')
    }

);

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



Deprecated: Функция WP_Query вызвана с аргументом, который считается устаревшим с версии 3.1.0! Параметр caller_get_posts считается устаревшим. Используйте ignore_sticky_posts. in /home/artem952/domains/devarts.pro/public_html/wp-includes/functions.php on line 6078
JS — скрыть внешние ссылки на сайте
Очень простой скрипт для скрытия внешних ссылок на любом сайте. Разрабатывался для CMS WordPress, но будет работать абсолютно везде. Полностью...
jQuery — таймер обратного отсчета с изменяемой скоростью
Рассмотрим наглядный пример управления таймером на jQuery. Задача: Таймер запускается при загрузке страницы. При клике на кнопку с числом скорость...
jQuery Cookies — ограничиваем повтор события с помощью куков
Cookies — возможность сохранить в браузере некие данные, которые не удалятся после обновления страницы. Задача: отследить с помощью javaScript фиксированное...
jQuery — очищаем поле с результатом после каждого выполненного события
Уже после написаний данной статьи случайно наткнулся на реальный пример описанного здесь простейшего косяка в jQuery коде. Это известный онлайн...
jQuery — простое модальное окно
В данной статье расскажу про очень простое решение с модальным окном на jQuery. Прикручивал его поверх платного конструктора шаблонов сайта...

Deprecated: Файл Тема без comments.php с версии 3.0.0 считается устаревшим. Альтернативы не предусмотрено. Пожалуйста, включите шаблон comments.php в вашу тему. in /home/artem952/domains/devarts.pro/public_html/wp-includes/functions.php on line 6078

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