Html 如何在css中仅为非触摸设备设置样式?
我正在为纯CSS中的按钮创建悬停效果。但我希望这种效果只在鼠标悬停时发生。但当触控设备上的按钮发生触控事件时,就会产生悬停效应。如何仅对非触摸设备限制此效果Html 如何在css中仅为非触摸设备设置样式?,html,css,modernizr,mousehover,Html,Css,Modernizr,Mousehover,我正在为纯CSS中的按钮创建悬停效果。但我希望这种效果只在鼠标悬停时发生。但当触控设备上的按钮发生触控事件时,就会产生悬停效应。如何仅对非触摸设备限制此效果 .toolbar-button:not(.media-control):not(#page-count-button):hover:enabled:after { content: ""; display: block; width: 37px; height: 34px; background-im
.toolbar-button:not(.media-control):not(#page-count-button):hover:enabled:after {
content: "";
display: block;
width: 37px;
height: 34px;
background-image:-webkit-gradient(linear, top, bottom, from(rgba(255,255,255, 0)), color-stop(0.65, rgba(255,255,255, 0.1)), to(rgba(255,255,255, 0.6)));
background-image:-webkit-linear-gradient( rgba( 255, 255, 255, 0), rgba(255,255,255, 0.15) 70%, rgba(255,255,255, 0.6));
background-image: -moz-linear-gradient( rgba( 255, 255, 255, 0), rgba(255,255,255, 0.15) 70%, rgba(255,255,255, 0.6));
background-image: -ms-linear-gradient( rgba( 255, 255, 255, 0), rgba(255,255,255, 0.15) 70%, rgba(255,255,255, 0.6));
background-image: -o-linear-gradient( rgba( 255, 255, 255, 0), rgba(255,255,255, 0.15) 70%, rgba(255,255,255, 0.6));
background-image: linear-gradient( rgba( 255, 255, 255, 0), rgba(255,255,255, 0.15) 70%, rgba(255,255,255, 0.6));
}
注意:我在这项工作中使用了jQuery touch punch。如果您--使用媒体查询并执行其中一项,会怎么样
@media (max-width:500px) and (min-width:320px) { /* some specific mobile viewport */
.toolbar-button:desktopbuttonstyles {
display: none;
}
.toolbar-button:MOBILEbuttonstyles {
display: block;
}
}
这不是一个理想的解决方案,但它应该是有效的
@media screen and (min-device-width:1024px) /*catch touch screen devices */
{
.toolbar-button:not(.media-control):not(#page-count-button):hover:enabled:after {
content: "";
display: block;
width: 37px;
height: 34px;
background-image:-webkit-gradient(linear, top, bottom, from(rgba(255,255,255, 0)), color-stop(0.65, rgba(255,255,255, 0.1)), to(rgba(255,255,255, 0.6)));
background-image:-webkit-linear-gradient( rgba( 255, 255, 255, 0), rgba(255,255,255, 0.15) 70%, rgba(255,255,255, 0.6));
background-image: -moz-linear-gradient( rgba( 255, 255, 255, 0), rgba(255,255,255, 0.15) 70%, rgba(255,255,255, 0.6));
background-image: -ms-linear-gradient( rgba( 255, 255, 255, 0), rgba(255,255,255, 0.15) 70%, rgba(255,255,255, 0.6));
background-image: -o-linear-gradient( rgba( 255, 255, 255, 0), rgba(255,255,255, 0.15) 70%, rgba(255,255,255, 0.6));
background-image: linear-gradient( rgba( 255, 255, 255, 0), rgba(255,255,255, 0.15) 70%, rgba(255,255,255, 0.6));
}
}
您还可以使用modernizer和:
.touch *:hover {
place default values here
}
认为你在利用现代化。那就很容易戒掉 只需添加类“.no js”
查看此链接以了解更多说明如何检测触摸设备的相关答案:
.no-touch a:hover,
.no-js a:hover { color: #06e; }