我有一个网站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;
}
}
答案 0 :(得分:1)
您可以在CSS中使用@media
来定义在满足某些参数时代码的行为。
请注意,使用min-width: 1024px
仅将此功能应用于小型笔记本电脑及更高版本,不包括平板电脑和移动设备。您还可以将max-width
与小于1024的值一起使用,以定义您的网站在移动设备/平板电脑上的工作方式。
只需将悬停效果等应用于较大的设备,而不是较小的设备。
@media (min-width: 1024px) {
.css-class:hover {
attribute: value;
attribute: value;
}
}
签出this resource来查看您对@media
还能做什么。