CODEWITHSUNDEEP
htmlcssmobile
muttley91
muttley91

Reputation: 12674

Disable :hover CSS on Mobile

I have the following CSS defined on some img elements on my page.

.my-image {
    width: 100% !important;
    height: auto;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}

.my-image:hover {
    -webkit-transform:scale(1.5);
    -moz-transform:scale(1.5);
    -ms-transform:scale(1.5);
    transform:scale(1.5);
}

For some reason, the hover class is activating on an iPhone anytime I scroll past it (that is, move my finger along the images to scroll past them). Is there any way I can disable the hover CSS for mobile only?

Upvotes: 3

Views: 11190

Answers (2)

Andrei Fedorov
Andrei Fedorov

Reputation: 3977

@media handheld {
.my-image:hover {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    transform: none;
}
}

UPDATE: On September 5, 2017, the Media Queries 4 specification was adopted, in which the handheld tag was deprecated. it is recommended to use the hover media query - for devices where you can hover over and item without clicking and not hover where you cannot.

@media (not hover) {
.my-image:hover {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    transform: none;
}
}

You can also use the media query pointer:(coarse|fine|one). coarse — for finger-controlled touchscreens, fine for mouse or stylus, and none for others.

@media (pointer:coarse) {
.my-image:hover {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    transform: none;
}
}

Upvotes: 9

Lalji Tadhani
Lalji Tadhani

Reputation: 14149

add media query like 

@media screen and (min-width: 1024px){
.my-image:hover {
    -webkit-transform:scale(1.5);
    -moz-transform:scale(1.5);
    -ms-transform:scale(1.5);
    transform:scale(1.5);
}
}

Upvotes: 0

Related Questions