时间戳

首页 > 解决方案 > 在基本网格中禁用悬停效果 - 仅在手机上

jquery - 在基本网格中禁用悬停效果 - 仅在手机上

问题描述

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


                                                   }

}

标签： jquerycsswordpresspluginsmousehover

解决方案

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

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

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

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

查看此资源以了解您还可以使用@media.

推荐阅读