Неверный селектор 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

Вы используете . для выбора класса, но это действительно идентификатор.

Кроме того, обычно встроенные стили в атрибуте style не могут быть перезаписаны псевдоклассами.Переместите CSS во внешнюю декларацию.

Я бы использовал ...

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

div#floater:hover {
    left: 0;
}

jsFiddle .

Answer 2

Используйте «#» для идентификатора, а не «.»- либо:

#floater { ... }

или

div#floater { ... }