Перейти к содержанию
appleuastore

Появление кнопок при наведении на карточку

Рекомендуемые сообщения

Подскажите как делают такую фичу http://bezpeka.com.ua/shop/category/videonabliudenie/videokamery/property-Color-853807?order=price&user_per_page=25&lp=0&rp=14900

При наведении на товар кнопки видны, до этого нет. Я думал display:none для кнопок а при наведении на товар обратно block, но нельзя. Как тогда это делают?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
18 минут назад, appleuastore сказал:

Подскажите как делают такую фичу http://bezpeka.com.ua/shop/category/videonabliudenie/videokamery/property-Color-853807?order=price&user_per_page=25&lp=0&rp=14900

При наведении на товар кнопки видны, до этого нет. Я думал display:none для кнопок а при наведении на товар обратно block, но нельзя. Как тогда это делают?

конкретно в вашем примере:

 

кнопки в блоке <div class="no-vis-table">

 

стили для блока:

 

.animateListItems.tablemini .no-vis-table, .animateListItems.table .no-vis-table, .animateListItems.items-h-carousel .no-vis-table {
    width: 100%;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
    position: absolute;
}

опасити - прозрачность = 0, т.е. прозрачны, не видны

 

при наведении опасити = 1, т.е. не прозрачны.

 

body.notTouch .animateListItems.tablemini .catalog-item:hover .no-vis-table, .animateListItems.table .catalog-item:hover .no-vis-table, .animateListItems.items-h-carousel .catalog-item:hover .no-vis-table {
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
}

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
37 минут назад, Gann сказал:

конкретно в вашем примере:

 

кнопки в блоке <div class="no-vis-table">

 

стили для блока:

 


.animateListItems.tablemini .no-vis-table, .animateListItems.table .no-vis-table, .animateListItems.items-h-carousel .no-vis-table {
    width: 100%;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
    position: absolute;
}

опасити - прозрачность = 0, т.е. прозрачны, не видны

 

при наведении опасити = 1, т.е. не прозрачны.

 


body.notTouch .animateListItems.tablemini .catalog-item:hover .no-vis-table, .animateListItems.table .catalog-item:hover .no-vis-table, .animateListItems.items-h-carousel .catalog-item:hover .no-vis-table {
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
}

 

Про опасити я знаю, что вы написали это вообще загадка)

У меня .product-thumb .button-group которые мне не нужны (я их скрываю) , но при наведении НА .product-thumb , .product-thumb .button-group отображается....

Изменено пользователем appleuastore

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
1 час назад, appleuastore сказал:

Про опасити я знаю, что вы написали это вообще загадка)

У меня .product-thumb .button-group которые мне не нужны (я их скрываю) , но при наведении НА .product-thumb , .product-thumb .button-group отображается....

так что вам нужно то?

.button-group {opacity: 0;}

.product-thumb:hover .button-group {opacity: 1;}

 

чтобы и при наведении не отображались ("но при наведении НА .product-thumb , .product-thumb .button-group отображается...."):

.product-thumb:hover .button-group {opacity: 0;}

а вообще - я бы лучше удалил .product-thumb с макета, если не надо, чтобы этот блок отображался

 

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
30 минут назад, Gann сказал:

так что вам нужно то?

.button-group {opacity: 0;}

.product-thumb:hover .button-group {opacity: 1;}

 

чтобы и при наведении не отображались ("но при наведении НА .product-thumb , .product-thumb .button-group отображается...."):

.product-thumb:hover .button-group {opacity: 0;}

а вообще - я бы лучше удалил .product-thumb с макета, если не надо, чтобы этот блок отображался

 

 

30 минут назад, Gann сказал:

так что вам нужно то?

.button-group {opacity: 0;}

.product-thumb:hover .button-group {opacity: 1;}

ОНО! спасибо большое, а то я запутался в классах и немного не понял. Все теперь дошло, благодарю!

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Увидел тему ) Решил тоже спросить. Когда делаю оформить заказ из корзины - появляется форма где клиент заносит свои данный, далее он должен нажать ОФОРМИТЬ, но кнопки не видно, Но когда мышкой наводишь на определенное место где должна быть эта кнопка - она становится видимой и я её нажимаю. А как сделать чтобы эта кнопка всегда была видимой? она белая на белом фоне получается, пока мышкой не наведешь) 

 

Изменено пользователем FAl

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
16 минут назад, FAl сказал:

Увидел тему ) Решил тоже спросить. Когда делаю оформить заказ из корзины - появляется форма где клиент заносит свои данный, далее он должен нажать ОФОРМИТЬ, но кнопки не видно, Но когда мышкой наводишь на определенное место где должна быть эта кнопка - она становится видимой и я её нажимаю. А как сделать чтобы эта кнопка всегда была видимой? она белая на белом фоне получается, пока мышкой не наведешь) 

 

ссылка на сайт поможет решить проблему

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.