Решено Инвертировать цвета на кнопке "добавить в корзину"

[Moonlight31]

Добрый день! Подскажите, пожалуйста, как можно инвертировать цвета на кнопке "добавить в корзину", т.е. сменить стиль когда выделяется кнопка на стиль когда на кнопку не наведен курсор.
Скриншоты прилагаю
Тема: emmet-lite
http://santechpost.ru/

Заранее спасибо за ответ

 

[searchingman]

С помощью стилей CSS задействовать псевдокласс hover.

 

[Moonlight31]

С помощью стилей CSS задействовать псевдокласс hover.

ушел читать, спасибо) достаточно добавить необходимый код в style.css темы?

 

[searchingman]

ушел читать, спасибо) достаточно добавить необходимый код в style.css темы?

Да. Для поиска и отладки нужных стилей можно использовать отладчик браузера, н-р, для Google Chrome по <F12>

 

[Moonlight31]

Да. Для поиска и отладки нужных стилей можно использовать отладчик браузера, н-р, для Google Chrome по <F12>

через firebug для мозиллы ищу, уже час разобраться не могу, где эта часть кода)

 

[dave14]

через firebug для мозиллы ищу, уже час разобраться не могу, где эта часть кода)

Вот эти стили:

.woocommerce ul.products .button, .woocommerce ul.products .added_to_cart {
    display: block;
    padding: 13px 12px 11px;
    margin: 15px 0 0;
    background: #fff;
    color: #356AD4;
    border: 2px solid #356AD4;
}

.woocommerce-pagination a:focus, .woocommerce-pagination a:hover, .woocommerce-pagination span, .woocommerce ul.products .button:hover, .woocommerce ul.products .added_to_cart:hover {
    background: #356ad4;
    border-color: #356ad4;
}

чтобы цвет поменять, в конец style.css темы добавьте

.woocommerce ul.products .button, .woocommerce ul.products .added_to_cart {
    background: #e31e24 !important;
    color: #ffffff !important;
}

 

[Moonlight31]

Вот эти стили:

.woocommerce ul.products .button, .woocommerce ul.products .added_to_cart {
    display: block;
    padding: 13px 12px 11px;
    margin: 15px 0 0;
    background: #fff;
    color: #356AD4;
    border: 2px solid #356AD4;
}

.woocommerce-pagination a:focus, .woocommerce-pagination a:hover, .woocommerce-pagination span, .woocommerce ul.products .button:hover, .woocommerce ul.products .added_to_cart:hover {
    background: #356ad4;
    border-color: #356ad4;
}

чтобы цвет поменять, в конец style.css темы добавьте

.woocommerce ul.products .button, .woocommerce ul.products .added_to_cart {
    background: #e31e24 !important;
    color: #ffffff !important;
}

Спасибо) меняет цвет в состоянии покоя)
для того, чтобы изменился цвет при наведение (через hover) необходимо добавить
.woocommerce ul.products .button:hover, .woocommerce ul.products .added_to_cart:hover {
background: #356ad4;
border-color: #356ad4;
}

с необходимыми цветами?

 

[dave14]

Спасибо) меняет цвет в состоянии покоя)
для того, чтобы изменился цвет при наведение (через hover) необходимо добавить
.woocommerce ul.products .button:hover, .woocommerce ul.products .added_to_cart:hover {
background: #356ad4;
border-color: #356ad4;
}

с необходимыми цветами?

да, верно. Например, чтобы инвертировать:

.woocommerce ul.products .button, .woocommerce ul.products .added_to_cart {
    background: #356ad4 !important;
    border-color: #356ad4 !important;
}

.woocommerce ul.products .button:hover, .woocommerce ul.products .added_to_cart:hover {
background: #fff !important;
}

 

[Moonlight31]

да, верно. Например, чтобы инвертировать:

.woocommerce ul.products .button, .woocommerce ul.products .added_to_cart {
    background: #356ad4 !important;
    border-color: #356ad4 !important;
}

.woocommerce ul.products .button:hover, .woocommerce ul.products .added_to_cart:hover {
background: #fff !important;
}

Добавил в style.css темы

.woocommerce ul.products .button, .woocommerce ul.products .added_to_cart {
    background: #356ad4 !important;
    border-color: #356ad4 !important;
    color: #fff !important;
}

.woocommerce ul.products .button:hover, .woocommerce ul.products .added_to_cart:hover {
background: #fff !important;
color: #356ad4 !important;
}

и всё стало, как надо)) Спасибо большое всем за помощь)