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

Question

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

}

I added a small code snippet . It is basically a zoom effect — cor
– cor, Commented Jul 15, 2015 at 14:21
Check this answer I think it's what you want: <stackoverflow.com/a/10166533/4627253> — Miguel
– Miguel, Commented Jul 15, 2015 at 14:22

Fabrizio Calderan · Accepted Answer · 2015-07-15 14:22:52Z

12

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

}

answered Jul 15, 2015 at 14:22

Fabrizio Calderan

124k26 gold badges171 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Denis Thomas · Accepted Answer · 2015-07-15 14:32:44Z

3

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

edited Jul 15, 2015 at 14:32

answered Jul 15, 2015 at 14:23

Denis Thomas

1,0221 gold badge8 silver badges17 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related