| Different Rollover Image on Hover - not working in Chrome & Safari
|
Holygamer999
msg:4504498 | 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
msg:4504504 | 2:42 pm on Oct 5, 2012 (gmt 0) |
.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
msg:4504513 | 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]
|
|
|
