Question

为什么css：悬停效果不起作用？ 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

小提琴：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代码。

CSS悬停效果不起作用

1 个答案: