Время чтения: 1 мин. 16 июня 2016 в 18:06 CSS,Javascript,Jquery
Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5
Загрузка...

Когда hover добавляем class к любому div

Суть в том, что когда нам нужно добавить класс к дочернему div, например, при наведение, то через стандартный метод сделать не выйдет.

Стандартный метод
[php]
$(‘.first_div’).hover(
function(){ $(this).addClass(‘hover’) },
function(){ $(this).removeClass(‘hover’) }
)
[/php]

То есть JS находит существующий div с названием first_div и добавляем к нему класс hover. В свою очередь .hover нужно создать в css и прописать стили.

Альтернатива

Активируется при наведении (hover).

[php]
<div class="first_div">
<div class="second_div"></div>
</div>
[/php]

[php]
$(‘.first_div’).hover(function () {
$(‘.second_div’).addClass(‘animation’);
}, function () {
$(‘.second_div’).removeClass(‘animation’);
});
[/php]

После добавления JS Ваш HTML получит ещё 1 класс

[php]
<div class="first_div">
<div class="second_div animation"></div>
</div>
[/php]

Я использовал данный скрипт, когда нужно было запустить анимацию иконки, при наведении на весь блок.

2016-06-16_210150

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

Заказать обратный звонок

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Получить коммерческое предложение

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Введите контактный e-mail *

Какая услуга Вас интересует? *

Допонительные услуги

Комментарий

Получить коммерческое предложение

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Введите контактный e-mail *

Какая услуга Вас интересует? *

Допонительные услуги

Комментарий

Получить консультацию

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Введите контактный e-mail *

Комментарий

Получить консультацию

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Введите контактный e-mail *

Комментарий

[contact-form-7 404 "Not Found"]
[contact-form-7 404 "Not Found"]
Начать сотрудничество
Заполните поля ниже. Я лично перезвоню Вам в течении 15 минут для обсуждения деталей.

Введите ваше имя *

Введите контактный телефон *

Введите контактный Email для отправки точной стоимости

или позвоните мне по телефону
+7-499-70-300-44
Получить консультацию

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Введите контактный e-mail *

Комментарий

[contact-form-7 404 "Not Found"]
Получить коммерческое предложение

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Введите контактный e-mail *

Какая услуга Вас интересует? *

Допонительные услуги

Комментарий

Получить коммерческое предложение

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Введите контактный e-mail *

Какая услуга Вас интересует? *

Допонительные услуги

Комментарий

Заказать услугу
Я свяжусь с Вами в течении 15 минут в рабочее время для обсуждения деталей

Введите ваше имя *

Введите контактный телефон *

Введите контактный e-mail *

Запись на бесплатный урок
Введите ваше имя, телефон и skype логин.
Я свяжусь с Вами для уточнения времени прохождения урока.

Введите ваше имя *

Введите контактный телефон *

Введите контактный E-mail *

Выберите программу

Промокод

Задать свой вопрос
Напишите свой вопрос. Я прочитаю его, и дам ответ в течении 15 минут.

Введите ваше имя *

Введите контактный email *

Сообщение