0

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.

Foreever
  • 7,099
  • 8
  • 53
  • 55

3 Answers3

1

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

Karthikeyan
  • 323
  • 3
  • 7
0

What if you -- used media queries and did one of these?

@media (max-width:500px) and (min-width:320px) { /* some specific mobile viewport */

    .toolbar-button:desktopbuttonstyles {
        display: none;
    }

    .toolbar-button:MOBILEbuttonstyles {
        display: block;
    }

}
Dr Upvote
  • 8,023
  • 24
  • 91
  • 204
0

Not an ideal solution, but it should work.

@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));
    }

    }

You can also use modernizer and:

.touch *:hover {
    place default values here
}
Goran Jakovljevic
  • 2,714
  • 1
  • 31
  • 27