Как заставить работать CSS:Hover при прокрутке Slick Slider?

Question

[Даниил Конев]

https://dk-web.site/

Стоит Slick Slider на блоке Часто смотрят:

Этот ховер меняет фон и он работает:

a.btn_add_basket:hover {
background-color: #181F29;
color: white;}

Этот ховер меняет цвет SVG иконки и он тоже работает, но те карточки которые в слайдере прокручиваются, на них это условие не работает:

a.btn_add_basket:hover svg#black_basket path {stroke: white !important;}
svg#black_basket path { transition: ease-out 0.9s;}

Почему так ? Предполагаю что нужно что-то в css править...

Comments

[Вадим]

svg#black_basket - уберите селектор по id

[Даниил Конев]

Вадим, блин точно:))) Спасибо большое! До этого тоже заметил, что если ID то не работает... Но что-то забыл про это :)))

[Ankhena]

Ivseti, id не могут дублироваться в рамках одной страницы.

p.s.
Уберите цвет stroke из разметки или используйте currentColor, хоть поудобнее будет.

p.p.s.
И зачем вы дублируете код SVG столько раз? Прочитайте про <use> и переиспользуйте.
Или вынесите иконку в css. Псевдоэлементом и масками. Зачем она вам в разметке?
https://codepen.io/noahblon/post/coloring-svgs-in-...

[Даниил Конев]

Ankhena, спасибо большое за совет! Я прислушался к вашей рекомендации и сделал так:

html:
<div class="icon icon_basket"></div>

css:

.icon {display: inline-block; position: relative; width: 14px; height: 17px; top: 3px; left: -5px;}

.icon_basket {
  background-color: #181F29;
  -webkit-mask-image: url(../img/basket.svg);
  mask-image: url(../img/basket.svg);
  transition: ease-out 0.9s;
}

a.btn_add_basket:hover .icon_basket {
  background-color: white;
}

Все супер! Единственное не понятно почему background-color задает цвет моего svg, но да ладно, работает отлично)

[Ankhena]

Ivseti,

почему background-color

Потому что так работают маски. Через маску вы видите фон.

и сделал так:
html: <div class="icon icon_basket"></div>

Отлично, теперь осталось удалить из разметки пустой лишний тег и заменить его на псевдоэлемент.

[Даниил Конев]

Ankhena, что бы я без Вас делал:) Я прислушался вновь и удалил пустой тег, сделал через псевдоэлемент before

a.btn_add_basket::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 17px;
  position: relative;
  top: 3px; 
  left: -5px;
  margin-right: 5px;
  background-color: #181F29;
  -webkit-mask-image: url(../img/basket.svg);
  mask-image: url(../img/basket.svg);
  transition: ease-out 0.9s;
}

a.btn_add_basket:hover:before  {
  background-color: white;
}

[Ankhena]

Ivseti, всё, последний штрих
замените
a.btn_add_basket:hover:before
на
a.btn_add_basket:hover::before

С одним : устаревшая форма записи.
Псевдоклассы пишутся с :, а псевдоэлементы с ::

Answer 1

[Вадим]

svg#black_basket - уберите селектор по id