Эффект наведения CSS не работает на Firefox ...

Question

У меня есть некоторые маркеры в верхней части карты, и цель состоит в том, чтобы иметь эффект зависания над каждым маркером, чтобы показать дополнительную информацию. Я использовал идентификатор для изображения и следующий CSS:

#pan { 
    position: absolute; 
    display: inline-block; 
} 

#pan:hover:before { 
    content: url('http://devmg.redtogreendesign.com/wp-content/uploads/2014/08/PAN_Hover.png') no-repeat !important; 
    display: block; 
    position: absolute!important; 
    top: 50px; 
    right: -200px!important; 
    z-index: 9999!important; 
} 

Отлично работает в сафари! Однако в Firefox ничего не происходит. Любая помощь будет оценена!

Answer 1

Не используйте no-repeat внутри content Недвижимость. По спецификации no-repeat недействительно content стоимость недвижимости.
Если вы хотите больше управления изображением, используйте background. Из-за изображений или градиентов, вставленных с использованием content, изменить размер нельзя.

Answer 2

Проблема: вы используете no-repeat на content. Просто удалите его.

#pan:hover:before { 
    content: url('http://devmg.redtogreendesign.com/wp-content/uploads/2014/08/PAN_Hover.png') !important; 
    display: block; 
    position: absolute!important; 
    top: 50px; 
    right: -200px!important; 
    z-index: 9999!important; 
} 

DEMO