Отключить эффект наведения в Essential Grid - только на мобильных телефонах - PullRequest
Новая
       10

Отключить эффект наведения в Essential Grid - только на мобильных телефонах

0 голосов
/ 15 января 2019

У меня есть сайт tyloz.com . На главной странице есть 4 панели, которые служат целевой страницей моего сайта. К этим панелям добавлен эффект наведения, который также активируется на телефоне. С телефона пользователь должен дважды нажать на панель, чтобы перейти к этой конкретной ссылке. Я просто хочу, чтобы на рабочем столе были пометки и наложения. Есть ли способ отключить наведение и двойное нажатие на телефоне? Пожалуйста, посетите веб-сайт для лучшего понимания.

Я добавил ниже код; 

@media (min-width: 1024px) {
  .minimal-light .esg-navigationbutton:hover,
.minimal-light .esg-filterbutton:hover,
.minimal-light .esg-sortbutton:hover,
.minimal-light .esg-sortbutton-order:hover,
.minimal-light .esg-cartbutton a:hover,
.minimal-light .esg-filterbutton.selected {
                                            background-color:#fff;
                                            border-color:#bbb;
                                            color:#333;
                                            box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.13);
                                          }

.minimal-light .esg-navigationbutton:hover * { color:#333; }

.minimal-light .esg-sortbutton-order.tp-desc:hover {
                                                    border-color:#bbb;
                                                    color:#333;
                                                    box-shadow: 0px -3px 5px 0px rgba(0,0,0,0.13) !important;
                                                   }

.minimal-light .esg-filter-checked { 
                                    padding:1px 3px;
                                    color:#cbcbcb;
                                    background:#cbcbcb;
                                    margin-left:7px;
                                    font-size:9px;
                                    font-weight:300;
                                    line-height:9px;
                                    vertical-align: middle;
                                    }
.minimal-light .esg-filterbutton.selected .esg-filter-checked,
.minimal-light .esg-filterbutton:hover .esg-filter-checked {
                                                            padding:1px 3px 1px 3px;
                                                            color:#fff;
                                                            background:#000;
                                                            margin-left:7px;
                                                            font-size:9px;
                                                            font-weight:300;
                                                            line-height:9px;
                                                            vertical-align: middle;


                                                   }

}

1 Ответ

0 голосов
/ 15 января 2019

Вы можете использовать @media в CSS, чтобы определить, как ваш код будет вести себя при соблюдении определенных параметров.

Обратите внимание, что использование min-width: 1024px применимо только к маленьким ноутбукам и выше, за исключением планшетов и мобильных телефонов. Вы также можете использовать это с max-width со значением меньше 1024, чтобы определить, как ваш сайт будет работать на мобильном телефоне / планшете.

Просто примените эффекты наведения и т. Д. К более крупным устройствам, а не к более мелким. 

@media (min-width: 1024px) {
  .css-class:hover {
    attribute: value;
    attribute: value;
  }
}

Проверьте этот ресурс , чтобы узнать, что еще можно сделать с @media.

...