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

时间:2019-01-15 08:40:53

标签: jquery css wordpress plugins mousehover

我有一个网站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 :(得分:1)

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

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

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

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

签出this resource来查看您对@media还能做什么。