Disable jQuery hover within CSS Media Query

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开发者_如何学Go 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?

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 :)