Hover CSS работает только в Chrome - PullRequest
Новая
       20

Hover CSS работает только в Chrome

2 голосов
/ 22 марта 2011

Эй, я пытаюсь использовать класс наведения CSS, и он отлично работает в Chrome, но не в Firefox. Любая помощь приветствуется. Вот мой CSS: 

.albumbox .labeltext {
    visibility: hidden;
}

.albumbox:hover .labeltext {
    visibility: visible;
}

А вот соответствующий HTML: 

<a href="http://open.spotify.com/album/2tG6kmDtT5rysmQAtzm5UW" target="_blank"><div class='albumbox'>

<img height="200px" width="200px" src="http://userserve-ak.last.fm/serve/300x300/9351489.jpg" />

<span class='album labeltext'>Escape The Fate<br>Escape The Fate</span>

</div></a>

Если вы хотите увидеть всю страницу, проверьте ее здесь http://fyspotify.appspot.com

Спасибо Том

Ответы [ 3 ]

3 голосов
/ 22 марта 2011

Это потому, что у вас есть элементы уровня блока внутри встроенных элементов, то есть, у вас есть <div> внутри <a>, и Firefox выбирает визуализацию по-другому, чем Chrome, поскольку поведение не определено.

Самый простойВ качестве решения проблемы можно использовать span вместо div, в любом случае нельзя использовать элементы уровня блока внутри встроенных элементов и ожидать, что он будет работать корректно во всех браузерах.

2 голосов
/ 22 марта 2011

Самая неотложная причина в том, что ваша страница отображается в режиме Quirks .

Добавьте это (тип документа HTML5) в качестве самой первой строки в источникекод, и я уверен, что он будет работать автоматически: 

<!DOCTYPE html>
0 голосов
/ 22 марта 2011

Я полагаю, это потому, что только теги <a> имеют событие :hover в CSS.Почему бы вам не назвать этот альбом для класса ссылок и установить для него значение display:block; через CSS?

Результат тот же, но, вероятно, будет более "соответствовать"!

...