CODEWITHSUNDEEP
css
Jonathan Wield
Jonathan Wield

Reputation: 17

CSS hover effect not working on Firefox…

I have some markers over the top of a map and the goal is to have a hover effect over each marker to show additional information. I used an ID for the image and the following 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;
}

Works great in safari! However, nothing happens in Firefox. Any help would be appreciated!

Upvotes: 1

Views: 210

Answers (2)

Rakhat
Rakhat

Reputation: 4942

Do not use no-repeat inside content property. By specification no-repeat is not valid content property value.
If you want more image control use background property. Because of images or gradients inserted using content cannot be resized.

Upvotes: 1

aniskhan001
aniskhan001

Reputation: 8521

The problem here is you are using no-repeat on a content property. Just remove it.

#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

Upvotes: 0

Related Questions