CSS内联样式忽略了悬停效果

时间:2017-06-20 06:42:14

标签: css inline-styles

我只是在玩CSS并注意到一个有趣的场景,我无法找到解释。也许你们中的一些人有这个答案。

我有一个带内联样式的div元素

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

我的CSS

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

#text-sample:hover {
    overflow:visible
}

此处悬停效果不适用。也就是说,overflow: visible规则没有采取。

  

注意:移动溢出:隐藏内联样式将解决问题。

我正在寻找悬停效果不适用的原因。谁能解释这种情况?

4 个答案:

答案 0 :(得分:1)

在其他条件相同的情况下,内联样式优先于通过样式表规则应用的样式。在您的情况下,当悬停时,通过样式表规则调用overflow: visible,但不能覆盖内联样式。如有必要,您可以尝试!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>

但是,在overflow: hidden样式表规则中指定#text-sample会更容易,而不是内联。

答案 1 :(得分:1)

您的内联样式将始终覆盖您的外部CSS。 您可以在!important

中使用:hover
#text-sample {
  width:200px;
  white-space: nowrap;
}

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

答案 2 :(得分:1)

内联样式优先于样式表。有两种方法可以改变它:使用JavaScript或在样式表中使用!important

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

答案 3 :(得分:0)

在CSS中,有一些名为https://stackoverflow.com/a/44632423/947111的东西。简单地说,像

#id { color: red; }

优先于

.blue { color: red; }

<div id="id" class="blue">之类的东西。见下面的例子。 这是因为ID选择器(#)被解释为比类更重要。以同样的方式,具有稍后声明(稍后在文件中)的同样特定的选择器优先,选择器越具体,它就越重要。

对于您的示例:内联样式优先于CSS文件中的任何内容(除非使用!important)。我相信:hover并没有改变任何事实。

有关详细规则,请查看上面的链接。

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

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

#sample-2 {
  overflow: hidden;
}

#foo {
  color: red;
}

.blue {
  color: blue;
}
&#13;
<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>
&#13;
&#13;
&#13;

修改

如评论中所述,特异性不适用于内联样式。尽管如此,内联样式优先于文件中CSS声明中的任何内容。但是,只要您将规则移动到相同的CSS文件中(如您所提到的那样),:hover就会比其他规则更重要,因为它在您悬停的那一刻更具体。