CODEWITHSUNDEEP
htmlcss
ispiro
ispiro

Reputation: 27723

CSS hover on div doesn't work

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

Upvotes: 2

Views: 203

Answers (2)

Stephen P
Stephen P

Reputation: 14830

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)

Upvotes: 1

jhpratt
jhpratt

Reputation: 7120

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.

Upvotes: 3

Related Questions