CSS hover on div doesn't work

Question

I can't seem to make a CSS listen to a :hover.

I have the following CSS:

<style>
    .hidescroll
    {
    }    
        .hidescroll :hover 
        {
            overflow-x: auto;
        }
</style>

And html:

<div class="hidescroll" style="width:100%; height:100px; background-color:green;  overflow-y:hidden; overflow-x:hidden;">
    <div style="width:300%; height:100px; background-color:red; ">abc</div>
</div>

I would expect the scrollbar to appear when I hover over the div. It doesn't. Why? (I tried to add div before :hover but that didn't help either.)

First, try removing the space between .hidescroll and :hover. — Smuuf
– Smuuf, Commented Jun 3, 2018 at 19:19

jhpratt · Accepted Answer · 2018-06-03 19:23:59Z

3

Inline styles have a higher specificity. You either have to say !important on the hover declaration or move your styles away from inline. I'd recommend the latter.

answered Jun 3, 2018 at 19:23

jhpratt

7,15016 gold badges43 silver badges53 bronze badges

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

1 Comment

ispiro Over a year ago

Perfect! I moved the overflow-x:hidden; into the CSS and it works. Thanks. (I can't accept for another 6 minutes.)

Stephen P · Accepted Answer · 2018-06-03 19:29:22Z

style="..." on the <div class="hidescroll" takes precedence over the separate css rule in the <style> block.

Since you already have a css rule for hidescroll, put those styles in there instead of putting them inline.

<style>
.hidescroll
{
    width:100%;
    height:100px;
    background-color:green;
    overflow-y:hidden;
    overflow-x:hidden;
}    
.hidescroll:hover 
{
    overflow-x: auto;
}
</style>

<div class="hidescroll">
    <div style="width:300%; height:100px; background-color:red;">abc</div>
</div>

It would be better to also put the styles for the inner div into a style rule.

Note — !important was meant to be used the user agents; used by the end-user to be able to override site styles, for example I use it to in my browser (with the Stylebot plugin) to fix font-size and contrast problems to make sites readable)

Collectives™ on Stack Overflow

CSS hover on div doesn't work

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related