I am creating a hover effect for buttons in pure CSS. But I want this effect to happen only when mouse hover occurs. But the hover effect is occurring when touch event occurs on button in touch devices. How can I limit this effect for only non-touch 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));
}
Note: I'm using jQuery-touch-punch in this work.
think your are making use of modernizr. Then its quit easy
just add class ".no-js"
.no-touch a:hover,
.no-js a:hover { color: #06e; }
check this link for further explanation Github- No :hover