CSS inline styling ignores hover effect

问题

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?

回答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;
}

回答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.

回答3:

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;
}

回答4:

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.

来源：https://stackoverflow.com/questions/44645639/css-inline-styling-ignores-hover-effect

标签

css

inline-styles