homepage Welcome to WebmasterWorld Guest from 54.197.147.90
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
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]

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved