CODEWITHSUNDEEP
cssresponsive-designhover
cor
cor

Reputation: 627

How do i disable CSS :hover in a media query?

I have a hover effect that i only want to trigger when the viewport has a min-width of 900px. And i want to disable the hover effect when the viewport is smaller.

How do i do this?

PS: I'm using Sass (SCSS) which might be is helpful.

This is a small snippet of the :hover effect that i want to disable. It is used to zoom images

img {
    display: table-cell;
    width: 100%;
    max-width: $painting-max-width;
    max-height: $painting-max-height;

    margin: auto;

    // zoom in animation transition
    transition: $painting-zoom-delay;
    transition-timing-function: cubic-bezier(0.25,0.46,0.45,0.94) 0s;

    &:hover {
        max-width: $painting-zoom-size;
        max-height: $painting-zoom-size;
    }

}

Upvotes: 4

Views: 21399

Answers (2)

Denis Thomas
Denis Thomas

Reputation: 1022

You could use a media query to enable the specific class with the hoover effect only if screen is wider than 899px:

@media (min-width: 900px) {
   img:hover {
      max-width: $painting-zoom-size;
      max-height: $painting-zoom-size;
   }
}

Upvotes: 3

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

Insert the :hover style inside a mediaquery, only when the size of the viewport is at least 900px wide, so you don't need to revert the style later.

img {
    display: table-cell;
    width: 100%;
    max-width: $painting-max-width;
    max-height: $painting-max-height;

    margin: auto;

    // zoom in animation transition
    transition: $painting-zoom-delay;
    transition-timing-function: cubic-bezier(0.25,0.46,0.45,0.94) 0s;

    @media all and (min-width: 900px) {
        &:hover {
           max-width: $painting-zoom-size;
          max-height: $painting-zoom-size;
        }
    }

}

Upvotes: 12

Related Questions