Как сделать hover эффект для товара?

Question

[Nina Kraviz]

Делаю интернет магазин на woocomerce, тема storefront: chainayanomer1.ru

Подскажите пожалуйста, как можно реализовать подобный hover эффект, чтобы изначально кнопка добавить в корзину не подсвечивалась и краткое описание было видно частично, но при наведении появлялось?
Пример:


Взято отсюда https://101tea.ru/catalog/chay/

Comments

[Ankhena]

Там это сделано скриптом. Открываете инспектор и разглядываете что к чему:

[Nina Kraviz]

Ankhena, спасибо, так и начал делать, но обычно мне также у себя на сайте удавалось посмотреть, к какому элементу применять стили, а сейчас, обнаружил, что у для каждого продукта своё название и не могу понять, как применить стили ко всем продуктам сразу

[Ankhena]

Nina Kraviz, .catalog-item и .catalog-item.hover и его детям

[Exploding]

Не надо так делать:
<a ...>в корзину</a>

Сделайте так:
<span data-text='в корзину'></span>

span[data-text]:before{
...
content: attr('data-text');
...
}

[Nina Kraviz]

Ankhena, спасибо большое за ответ, но почему-то не получилось применить стили к данным элементам, прописал фон и рамку, ничего не поменялось, применял к .catalog-item

[Nina Kraviz]

Exploding, большое спасибо, я пока что очень слабо разбираюсь, но так понял, что преимущество span том, что ему задается класс и потом можно css для него прописать?

[Ankhena]

Exploding, Nina Kraviz ну уж точно не span, а дальше по обстоятельствам
https://habrahabr.ru/post/317728/

[Ankhena]

Nina Kraviz, сделайте пример на jsfiddle.net

применял к .catalog-item

Я не обнаружила у вас тегов .catalog-item, так что было бы странно, если бы они применились.
Впрочем и не пыталась перелопатить все страницы вашего сайта.

[Nina Kraviz]

Ankhena, я видимо Вас совсем неправильно понял, Вы просто посоветовали применять к .catalog-item, я так и стал делать, извините за глупые вопросы, просто у меня уровень познаний пока что очень низкий, я обычно либо плагином site origin css определяю название элемента, к которому нужно применить стили либо смотрю через "код страницы", я просто подумал, что вы как-то узнали название элемента, который отвечает за стили вмакета товара, поэтому и стал к нему пытаться применять))

[Ankhena]

Nina Kraviz, я сказала лишь к каким селекторам применены стили на сайте образце. Вам нужно применить эти же стили к вашим аналогичным селекторам.

[Nina Kraviz]

Ankhena, а Вы не могли бы мне пожалуйста подсказать, как узнать имя данного селектора? просто так, как я обычно делал, не получается определить

[Ankhena]

Nina Kraviz, у вас там

li class="post-216 product type-product status-publish has-post-thumbnail product_cat-whitetea pa_--63 first instock shipping-taxable purchasable product-type-simple"

видимо, .product будет соответствовать .catalog-item

В вашем примере на js добавляется класс. Можно сделать без js, просто по обычному hover.
В примере блоки расставлены флоатами, сейчас актуальнее флексы.
По сути, вам надо сотворить примерно такое: https://jsfiddle.net/Ankhena/yj26prve/

[Nina Kraviz]

Ankhena, спасибо большое, нужный элемент нашел: ul.products li.product
Хотел прописать появление рамки при наведении, почему-то не работает:
ul.products li.product:hover {
border-width: 1px;
border-color: #000000;
}

Как думаете, в чем может быть дело? другие стили, например, цвет фона, подключаются

[Ankhena]

Nina Kraviz, ох, вам бы справочник почитать
У border 3 составляющих: цвет, толщина и стиль. Допишете border-style - заработает. Либо сокращенной записью border: 1px solid red;

[Nina Kraviz]

Ankhena, точно, совсем вылетело из головы, спасибо большое!

[Exploding]

Nina Kraviz, Ankhena, Я имел ввиду немного другой нюанс, а именно большое кол-во повторений в контенте слова "В корзину"... А span там будет или что-то другое, это другой вопрос уже...

Answer 1

[Антон Дробышев]

css
У ваших товаров есть класс products ul.products li.product .button. Делаете visibility:hidden
js

$( "ul.products li.product" ).hover(function() {
    $( this ).find('ul.products li.product .button').css('visibility', 'visible');
});

Примерно так

Answer 2

[Nina Kraviz]

Здравствуйте, спасибо большое, к сожалению, с изменением js ранее не имел дела, только php и css через дочернюю тему, не могли бы Вы подсказать, где вносить данные изменения и нет ли возможности через css класс hover добиться аналогичного эффекта?

Comments

[Антон Дробышев]

Без js не получится. Вы прячете стилями элемент, и появляется он только после события С ЭТИМ ЭЛЕМЕНТОМ. Т.е. он появится только если вы наведете на спрятанную кнопку. Чтобы кнопка появилась при событии на др. элементе вам нужен js.

1) создайте файл js и пропишите что нужно в нем.
2) подключите js через functions.php

add_action('wp_enqueue_scripts', 'my_assets');
function my_assets(){
	wp_enqueue_script('названиеСкрипта', 'путь-до-скрипта', array('jquery'), '', true);
}

[Nina Kraviz]

Антон Дробышев, большое спасибо, теперь понял разницу, буду пытаться разобраться с js