jquery - 在 Essential Grid 中禁用悬停效果 - 仅适用于手机

Question

我有一个网站 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;


                                                   }

Answer 1

您可以在 CSS 中使用 @media 来定义您的代码在满足特定参数时的行为方式。

请注意，使用 min-width: 1024px 只会将其应用于小型笔记本电脑及以上，不包括平板电脑和手机。您还可以将此值与小于 1024 的 max-width 一起使用，以定义您的网站在移动设备/平板电脑上的工作方式。

只需将您的悬停效果等应用于较大的设备而不是较小的设备。

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

查看 this resource看看您还可以用 @media 做什么。