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

[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, но нельзя. Как тогда это делают?

[Gann]

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;
}

 

[appleuastore]

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 отображается....

Змінено 14 вересня 2017 користувачем appleuastore

[Gann]

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 с макета, если не надо, чтобы этот блок отображался

 

[appleuastore]

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]

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

 

Змінено 2 березня 2018 користувачем FAl

[Blondi]

16 минут назад, FAl сказал:

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

 

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