Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • Sign Up

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


Recommended Posts

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

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

Link to post
Share on other sites

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

 

Link to post
Share on other sites
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 отображается....

Edited by appleuastore
Link to post
Share on other sites

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
Link to post
Share on other sites
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;}

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

Link to post
Share on other sites

  • 5 months later...

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

 

Edited by FAl
Link to post
Share on other sites

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

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

 

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

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.