CODEWITHSUNDEEP
htmlcss
Amy.js
Amy.js

Reputation: 536

Disable whatever :hover css effects there is when on a different media

I'm not sure if this is even possible, but I'd like to throw it out there: say I have something like

.this-thing:hover {
  /* something magical */
}

in CSS. During Print Preview and Print, I would like to "disable" whatever hover effect is on .this-thing, such that even if the user is hovering over a given element when they decide they want to print the page, the effects from /* something magical */ do not appear on Print Preview or the printed media.

Is there a pure CSS solution to this?

Note that I do not want to found out what the specifics of /* something magical */ is in order to disable it during @media print.

Upvotes: 0

Views: 731

Answers (2)

LcSalazar
LcSalazar

Reputation: 16841

The same way as you use the only and and logical selector, you can use the not to specify that the style rule should not apply to some media type:

@media not print {
    .this-thing:hover {
        /* something magical */
    }
}

Upvotes: 1

Lenny Sirivong
Lenny Sirivong

Reputation: 1031

You could use @media only screen to apply the hover effects only to the :hover rules.

So you would do:

@media only screen {
    .this-thing:hover {
      /* something magical */
    }
}

Organizationally, this may be a mess to pepper @media only screen around all of your hovers, but it's one option.

Upvotes: 1

Related Questions