CSS 悬停效果不起作用

Question

为什么 css :hover 效果不起作用？ http://jsfiddle.net/t7on1k15/

    body,html
    {
        font-family: courier;
        height:100%;
        min-width: 100%;
        margin:0;
        padding: 0;
    }
    #idDivBodyWrapper
    {
        margin:0;
        padding:0;
        height: 100%;
        width: 100%;
        background: lightgray;
    }

    #four:hover
    {
        color:black;
    }

HTML

<div id="idDivBodyWrapper" style="vertical-align:middle;">
        <div style="position:absolute;display:block;float:left;left:0;Top:0"><button class="btn btn-default btn-lg" style="opacity:1;background:transparent;font-family:courier;font-weight:bold;" onclick="location.href='http://vqplan.com';"><i style="color:white;opacity:1;" class="fa fa-th fa-fw fa-5x"></i><br><span style="opacity:1;color:white">home</span></button></div>

 <table style="width:100%;height:100%;background:black;clear:both;vertical-align:middle;text-align:center;"><tr><td>
<h1 id="four" style="font-size:10vh;color:white;">Code that lasts.<br><br><i id="one" class="fa fa-terminal fa-3x fa-fw" style="color:white;"></i></h1>

</td></tr></table>
</div><!--end idDivBodyWrapper-->

这是一个有效的方法： http://jsfiddle.net/tuxdukz4/

Answer 1

CSS - CASCADING 样式 sheets。您的 h1#four 元素中包含 style="color:white"。 color:white 的优先级高于外部样式 sheet 规则，因此 color: white 会覆盖 :hover 样式。

如果您 mod 您的 fiddle 并将 color:purple 放入 h1 的 style= 属性中，您将得到完全相同的行为：悬停不起作用.

Answer 2

因为CSS特异性。我真的建议您阅读它：http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

您有一个元素级样式 color: white 可以覆盖悬停效果。

检查这个是否有效：http://jsfiddle.net/t7on1k15/1/

Answer 3

fiddle: http://jsfiddle.net/t7on1k15/2/

将 <h1 id="four" style="font-size:10vh;color:white;"> html 更改为：

<h1 id="four">Code that lasts.<br><br></h1>

然后添加这个 css:

#four {
    font-size:10vh;color:white;    
}

您的内联样式比其他 css 代码具有最高的优先级。

Answer 4

我认为内联样式 ("style="font-size:10vh;color:white;") 优先于 css。内联样式具有更高的优先级。你实际上不能如果您使用内联样式，则在 css 中没有悬停的样式 #four。

CSS 悬停效果不起作用

CSS on hover effect not working

css