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

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

);


Понравилась статья "jQuery - изменяем вложенный блок (чилд) при наведении на родительский" из раздела Веб разработка » JavaScript? Подпишись на RSS. Будь в курсе всего происходящего на сайте
Комментариев: 0 •  Просмотров: 159   Дата: 11-июн-2017, 17:10

Похожие статьи

Комментарии

b
i
u
s
|
left
center
right
|
emo
color
|
hide
quote
translit

© 2010-2017 devarts.pro v 7.0: flexyflat tpl Designed by devarts
Карта сайта HTMLКарта сайта XMLПравообладателям
Яндекс.Метрика