Welcome to WebmasterWorld Guest from 54.144.79.200

Forum Moderators: not2easy

Message Too Old, No Replies

Different Rollover Image on Hover - not working in Chrome & Safari

     

Holygamer999

2:21 pm on Oct 5, 2012 (gmt 0)



I have a thumbnail image displayed and when you rollover it I want a different image displayed (this is not a larger version of the image, it's a different image). This works in Firefox, Opera and Internet Explorer but not Chrome or Safari. How can I fix it? I have several different thumbs that I want to do this for.

This is the thumbnail:

<a href="" class="Raw1996"><img src="image.jpg" style="width: 150px; height:173px; display:block"></a>

This is my css for the rollover image to display (when you do this the thumb is hidden):

.Raw1996:hover { display: block; position:absolute; top: 0px; left: 0px; width: 800px; height: 437px; background-image: url('image.jpg') }

[edited by: Holygamer999 at 2:51 pm (utc) on Oct 5, 2012]

drhowarddrfine

2:42 pm on Oct 5, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



.image refers to a class called 'image' and you have no such class. If you want it to apply to the <img> them you need to make it: img:hover

You could also do .Raw1996 img:hover{}

Holygamer999

2:57 pm on Oct 5, 2012 (gmt 0)



Sorry I made a typo, I changed the class names to match now.

I changed the css class name like you said but it's still not working.

.Raw1996 img:hover { display: block; position:absolute; top: 0px; left: 0px; width: 800px; height: 437px; background-image: url('http://example.com/image.jpg') }


Also now the thumb displays in the top left of the table in the foreground.

[edited by: alt131 at 4:33 pm (utc) on Oct 5, 2012]
[edit reason] Thread Tidy [/edit]