• Никакой политики на форуме. Иначе - бан!
  • Вопрос без рабочей ссылки на проблему считается риторическим. Без ссылки и скриншота - провокацией!
  • Темы озаглавленные с маленькой буквы или капсом удаляются без предупреждения!

Не могу разобраться с CSS

slavantos

Новичок
Здравствуйте! Помогите пожалуйста разобраться в CSS. Хотелось бы чтобы при наведении на блок товара в каталоге, отбрасывалась тень. Но никак не получается. Получается только, что каждый элемент в блоке при наведении отбрасывает тень.
belkini2.beget.tech/shop/

Screenshot_1.png
 

ADv

Гуру
Местный
Возьмите самый "верхний", общий элемент типа .isotope-item
 

slavantos

Новичок
Возьмите самый "верхний", общий элемент типа .isotope-item
Спасибо за отклик! Я брал и этот элемент тоже. Дело в том, что данный элемент в данном шаблоне присвоен абсолютно всем элементам сайта. Не могу подобрать комбинацию правильную из классов. Если убираю :hover, то выделяется весь блок, скрин прилагаю. Но мне нужно чтобы такое выделение срабатывало только при наведении мыши, то есть с :hover.
Screenshot_2.png
 
Последнее редактирование:

tuxfighter

Гуру
Местный
пробуйте
CSS:
.woocommerce ul.products li:hover {
    -webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 5px 5px 15px 1px rgba(0, 0, 0, 0.3), 0 1px 0px rgba(0, 0, 0, 0.1);
}
 

slavantos

Новичок
пробуйте
CSS:
.woocommerce ul.products li:hover {
    -webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 5px 5px 15px 1px rgba(0, 0, 0, 0.3), 0 1px 0px rgba(0, 0, 0, 0.1);
}
Спасибо Вам огромное! Работает. Только не понял логики, но я не профи конечно, только учусь)) Еще раз спасибо за помощь!
 

tuxfighter

Гуру
Местный
логика простая: выбирается нужный элемент, добавляется псевдокласс :hover
 
Сверху Снизу