CSS悬停选择器坏了

Question

下面的悬停样式无法正常工作。谁能解释为什么？

<style type="text/css">
    div.floater :hover {
    left:0px;
}
</style>

<div id="floater" style="position:fixed; top:260px; left:-110px;">
    <a href="http://www.soundcloud.com/goinnative" target="_blank">
        <img title="Soundcloud" alt="Soundcloud" 
            src="http://www.imgjoe.com/x/gnsoundcloud.png" border="0" />
    </a>
</div>

Answer 1

您正在使用.作为类选择器，但它确实是一个id。

此外，style属性中的内联样式通常不能用伪类覆盖。将CSS移动到外部声明中。

我会用......

div#floater {
    position: fixed; 
    top: 260px; 
    left: -110px;   
}

div#floater:hover {
    left: 0;
}

jsFiddle

Answer 2

对id使用'＃'，而不是'。' - 所以：

#floater { ... }

或

div#floater { ... }