Disable jQuery hover within CSS Media Query

Question

I'm aware i probably cant execute jQuery within a CSS file. But here is my conundrum:

I have several divs with overlays on them. On a desktop the user hovers over the overlay and it slides up revealing content.

On a mobile, there isnt a hover state (gracefully implemented). How can i use my existing Media Query logic to disable jQuery hover on those certain divs?

Any advice welcome, or even for an alternative solution to this problem?

It's a better idea to use JavaScript for this, though you may not be able to detect with the exact same conditions as media queries... — BoltClock
– BoltClock, Commented Jul 13, 2011 at 20:25

Kraz · Accepted Answer · 2011-07-13 21:01:45Z

1

Your code quite probably look like this while running :

<div id="container">
    <div class="item show" />
    <div class="item hide" />
    <div class="item hide" />
    <div class="item hide" />
    <div class="item hide" />
</div>

with hide being something like display:none
and show being display:block

Just change hide to display:block in the good Media Query and mobile user will see all the content! (might have to disable the JS too)

I want to scold you lightly for not putting up any code and having 4k rep :)

answered Jul 13, 2011 at 21:01

Kraz

7,1086 gold badges44 silver badges72 bronze badges

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

2 Comments

benhowdle89 Over a year ago

Scolding appreciated. I figured it was more of a conceptual question than an actual code problem :)

Kraz Over a year ago

My only issue is that I wasn't sure of what you really wanted.

Collectives™ on Stack Overflow

Disable jQuery hover within CSS Media Query

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related