CSS inline styling ignores hover effect

Question

I was just playing around with CSS and noticed an interesting scenario for which I couldn't really find an explanation. Maybe some of you have the answer for this.

I have a div element with an inline styling

<div id="text-sample" style="overflow:hidden;">This is a sample text to test the CSS behavior of inline styling</div>

My CSS

#text-sample {
    width:200px;
    white-space: nowrap;
}

#text-sample:hover {
    overflow:visible
}

Here the hover effect is not applying. That is, the overflow: visible rule is not taking.

Note: Moving the overflow:hidden from inline style will fix the issue.

I'm looking for the reason why hover effect is not applying. Can anyone explain this scenario?

Answer 1

All else being equal, inline styles take precedence over styles applied via stylesheet rules. In your case, when hovering, the overflow: visible is invoked via the stylesheet rule, but that cannot override the inline style. If necessary, you could try !important.

#text-sample {
    width: 200px;
    white-space: nowrap;
}

#text-sample:hover {
    overflow: visible !important;
}

<div id="text-sample" style="overflow:hidden;">
  This is a sample text to test the CSS behavior of inline styling
</div>

But it would be easier simply to specify overflow: hidden in the #text-sample stylesheet rule, instead of giving it inline.

Answer 2

Your inline style will always override your external CSS. You can use !important in :hover

#text-sample {
  width:200px;
  white-space: nowrap;
}

#text-sample:hover {
  overflow:visible!important;
}