2

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?

ajeshrkurup
  • 165
  • 3
  • 14

4 Answers4

2

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.

1

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;
}
Pratyush
  • 525
  • 1
  • 8
  • 18
1

Inline styles take precedence over style sheets. There are two ways to change that: using JavaScript or using !important in the style sheet.

#text-sample:hover {
   overflow:visible !important;
}
Mr.Pandya
  • 1,899
  • 1
  • 13
  • 24
1

In CSS, there's something called Specificity. Simply said, something like 

#id { color: red; }

would take precedence over something like

.blue { color: red; }

when having something like <div id="id" class="blue">. See example below. This is because an ID selector (#) is interpreted as more important than a class. In the same manner, an equally specific selector with a later declaration (later in the file) takes precedence and the more specific your selector gets, the more important it is.

For your example: An inline-style takes precedence over anything written in a CSS file (unless using !important). I believe the :hover does not change anything on that fact.

For the detailed rules look my link above.

div {
    width:200px;
    white-space: nowrap;
}

#text-sample:hover,
#sample-2:hover {
    overflow:visible;
}

#sample-2 {
  overflow: hidden;
}

#foo {
  color: red;
}

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

<div id="sample-2">This is a sample text to test the CSS behavior of inline styling</div>

<div id="foo" class="blue">foo</div>

EDIT

As mentioned in comments, Specificity does not apply to inline styles. Nevertheless, inline styles are taking precedence over anything in a CSS declarations in files. However, as soon as you move the rule into the same CSS file (as you mentioned will work), the :hover is more important than the other rule since it is more specific in the moment you're hovering.

SVSchmidt
  • 6,269
  • 2
  • 26
  • 37
  • Inline styles have nothing to do with specificity. Specificity applies to rules in stylesheets. Whether or not a given style is applied is based first on whether it's inline, then if a stylesheet rule applies, on that rule's specificity. This particular problem is unrelated to specificity. –  Jun 20 '17 at 06:56
  • @torazaburo I see, I did not know the word does not apply. But since inline styles are the most specific you can get, I think this does not change the general conclusion of my answer (inline takes precedence). – SVSchmidt Jun 20 '17 at 07:03
  • @torazaburo Updated my posting. I think this should be okay. – SVSchmidt Jun 20 '17 at 07:06