Карточка предмета Mouseenter

Помогите пожалуйста с кодом! Мне нужно навести указатель мыши на кнопку с тележкой, она добавила класс и класс svg, а кнопка с избранным, также добавила класс. И наоборот - при наведении курсора мыши на избранное кнопка с тележкой скрывается

$('.item-block__button-cart').mouseenter

function() {
  $(this).addClass('item-block__button-cart--active');
  $(this).find("svg").addClass("active-svg");
  $(this).siblings(".item-block__button").addClass("item-block__button-favorite--deactive");
}
);

$('.item-block__button-cart').mouseleave

function() {
  $(this).removeClass('item-block__button-cart--active');
  $(this).find("svg").removeClass("active-svg");
  $(this).siblings(".item-block__button").removeClass("item-block__button-favorite--deactive");

}
);

$('.item-block__button-favorite').mouseenter

function() {
  $(this).addClass('item-block__button-favorite--active');
  $(this).find("svg").addClass("active-svg");
  $(this).siblings(".item-block__button").addClass("item-block__button-cart--deactive");
}
);

$('.item-block__button-favorite').mouseleave

function() {
  $(this).removeClass('item-block__button-favorite--active');
  $(this).find("svg").removeClass("active-svg");
  $(this).siblings(".item-block__button").removeClass("item-block__button-cart--deactive");

}
);
.item-block__buttons {
  border-top: 1px solid hsla(0, 0%, 96%, .75);
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  opacity: 1;
  -webkit-transition: opacity .2s;
  transition: opacity .2s;
  z-index: 2;
  background: hsla(0, 0%, 100%, .75);
  overflow: hidden
}

.item-block:hover .catalog__items-item-slider .carousel__arrow--detail,
.item-block:hover .item-block__buttons {
  opacity: 1
}

.item-block__button {
  width: 50%;
  position: relative;
  z-index: 2;
  -webkit-transition: opacity .1s, -webkit-transform .2s;
  transition: opacity .1s, -webkit-transform .2s;
  transition: transform .2s, opacity .1s;
  transition: transform .2s, opacity .1s, -webkit-transform .2s
}

.item-block__button-cart--deactive,
.item-block__button-favorite--deactive {
  display: none
}

.item-block__button-cart--active,
.item-block__button-favorite--active {
  width: 100%
}

.item-block__button-favorite {
  border-right: 1px solid hsla(0, 0%, 96%, .7)
}

.item-block__button-favorite--active {
  border: none
}

.item-block__button svg {
  position: absolute;
  top: 50%;
  left: 75px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  fill: #4c4b5b;
  -webkit-transition: -webkit-transform .2s;
  transition: -webkit-transform .2s;
  transition: transform .2s;
  transition: transform .2s, -webkit-transform .2s
}

.item-block__button i {
  position: absolute;
  top: 50%;
  left: 15px;
  line-height: 18px;
  font-size: 14px;
  color: #b6b8ba;
  margin-top: -9px;
  right: 15px;
  text-align: center
}

.item-block__button-cart svg {
  left: auto;
  right: 80px
}

.item-block--big .item-block__button svg {
  left: 175px
}

.item-block--big .item-block__button-cart svg {
  left: auto;
  right: 175px
}

.item-block__button-cart--added svg.active-svg {
  right: 160px
}

.item-block__button-cart--active svg {
  -webkit-transform: translate(-135px, -50%);
  transform: translate(-135px, -50%)
}

.item-block--big .item-block__button-cart--active svg {
  -webkit-transform: translate(-240px, -50%);
  transform: translate(-240px, -50%)
}

.item-block__button-favorite--active svg {
  -webkit-transform: translate(30px, -50%);
  transform: translate(30px, -50%)
}

.item-block--big .item-block__button-favorite--active svg {
  -webkit-transform: translate(130px, -50%);
  transform: translate(130px, -50%)
}

.item-block__button a.addet-to-basket-link,
.item-block__button span {
  color: #4c4b5b;
  text-transform: uppercase;
  font-size: 14px;
  position: absolute;
  top: 20px;
  left: 115px;
  white-space: nowrap;
  letter-spacing: 1.05px;
  -webkit-transition: opacity .1s, -webkit-transform .2s;
  transition: opacity .1s, -webkit-transform .2s;
  transition: transform .2s, opacity .1s;
  transition: transform .2s, opacity .1s, -webkit-transform .2s;
  opacity: 0
}

.item-block--big .item-block__button span {
  left: 215px
}

.item-block__button-cart span {
  left: auto;
  right: -30px;
  color: #ff2438
}

.item-block--big .item-block__button-cart span {
  left: auto;
  right: 65px
}

.item-block__button-cart--added span {
  right: -80px
}

.item-block__button-cart--active span {
  opacity: 1;
  -webkit-transform: translateX(-135px);
  transform: translateX(-135px)
}

.item-block--big .item-block__button-cart--active span {
  opacity: 1;
  -webkit-transform: translateX(-240px);
  transform: translateX(-240px)
}

.item-block__button-favorite--added span {
  left: 35px
}

.item-block__button-favorite--active.item-block__button-favorite--added svg {
  left: 0
}

.item-block__button-favorite--active span {
  opacity: 1;
  -webkit-transform: translateX(30px);
  transform: translateX(30px)
}

.item-block--big .item-block__button-favorite--active span {
  opacity: 1;
  -webkit-transform: translateX(130px);
  transform: translateX(130px)
}

.item-block__button-favorite svg {
  width: 22px;
  fill: #4c4b5b;
  height: 18px
}

.item-block__button-cart svg {
  width: 35px;
  height: 35px;
  fill: #ff2438
}
<span class="item-block__buttons">
        <span class="js-add-to-favorite item-block__button item-block__button-favorite" data-toggle="tooltip" data-placement="top" onclick="return $.addFavorite('/shop/favorite/', {@id}, this)">
                        <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
                            <span>В избранное</span>
</span>
<span class="js-add-to-basket js-add-to-basket-list item-block__button item-block__button-cart" data-toggle="modal" data-target="#added2basket" data-placement="top" onclick="return $.bootstrapAddIntoCart('/shop/cart/', {@id}, 1)">
                            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="20.5" r="1"/><circle cx="18" cy="20.5" r="1"/><path d="M2.5 2.5h3l2.7 12.4a2 2 0 0 0 2 1.6h7.7a2 2 0 0 0 2-1.6l1.6-8.4H7.1"/></svg>
                            <span>В корзину</span>
</span>
</span>

Источник

1 ответ

Этот код работает!

$(document).ready(function() {

  $('.item-block__button-cart').mouseenter(function() {
    $(this).addClass('item-block__button-cart--active');
    $(this).find("svg").addClass("active-svg");
    $(this).siblings(".item-block__button").addClass("item-block__button-favorite--deactive");
  });

  $('.item-block__button-cart').mouseleave(function() {
    $(this).removeClass('item-block__button-cart--active');
    $(this).find("svg").removeClass("active-svg");
    $(this).siblings(".item-block__button").removeClass("item-block__button-favorite--deactive");

  });

  $('.item-block__button-favorite').mouseenter(function() {
    $(this).addClass('item-block__button-favorite--active');
    $(this).find("svg").addClass("active-svg");
    $(this).siblings(".item-block__button").addClass("item-block__button-cart--deactive");
  });

  $('.item-block__button-favorite').mouseleave(function() {
    $(this).removeClass('item-block__button-favorite--active');
    $(this).find("svg").removeClass("active-svg");
    $(this).siblings(".item-block__button").removeClass("item-block__button-cart--deactive");
  });

});

Источник
Другие вопросы по тегам