Как написать функцию hover?

Question

[RushV]

Все приветствую!
Как правильно написать функцию наведении hover при наведении на ссылку а ?
Мой код нет так работает как надо.
За ранее благодарю!

$( document ).ready(function(){
    "use strict";
    $('.link-cart-index').hover(function(event){
        $('.cart-i').hover(function(){
            $(this).addClass('active-cart-1');
        },
        function(){
            $(this).removeClass('active-cart-1');
        });
        event.preventDefault();
    });  
  });

Comments

[Антон]

Так вы бы рассказали, что код должен делать. А так, пока в глаза бросается лишняя строчка $('.cart-i').hover(function(){ - типа вы в обработчике ховера назначаете ещё один обработчик, хотя, скорее всего, вам просто класс надо назначить.

[RushV]

Антон,
Прошу прощения что я не подумал описать всё ситуацию!
Просто есть три ссылки.
При наведении на ссылку это класс "link-cart-index" добавлялся к классу "cart-i" класс active-cart-1. Если убираем курсор мыши , то удаляется класс "active-cart-1".

Answer 1

[v3shin]

$('.link-cart-index').hover(function(){
    $('.cart-i').toggleClass('active-cart-1');
});

Comments

[RushV]

Код у вас добавляет ко всем ссылкам одновременно, а надо что бы добавлялся к которому навели мышкой.

[v3shin]

RushV, так ваш код делает то же самое.
$('.cart-i') -> $(this)

[RushV]

v3shin, Почему то мой код срабатывает тогда, когда я довожу курсор до блока, а по ссылке довожу не работает.

[v3shin]

RushV, без разметки вам точнее не скажу. Изучайте селекторы css и работу с jquery.

[RushV]

v3shin,
Вот разметка

<a href="/" class="link-cart-index"">
              <div class="card bg-dark text-white cart-index">
                <img src="/img/avto-h.jpg" class="card-img shadow" alt="Автохимия">
              <div class="card-img-overlay shadow p-5">
                <div class="bg-light h-100 cart-i">
                  <div class="row align-items-center justify-content-center h-100">
                    <div class="col position-relative text-center">
                      <span class="d-block">01.</span>
                      <h2 class="card-title text-dark w-100">автохимия</h2>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </a>

[v3shin]

1. Используйте web inspector (F12 в Хроме).
2. Исправьте косяк в разметке: class="link-cart-index""
3. Почитайте про jQuery.find.

[RushV]

v3shin, Всё получилось:
Вот так сделал

$('.link-cart-index').hover(function(){
    $(this).find(".cart-i").addClass('active-cart-1');
   },
   function () {
    $(this).find(".cart-i").removeClass('active-cart-1');
   });

Может про проще код сделать не знаю как лучше сделать.
Спасибо вам большое за помощь!