Jump to content
Sign in to follow this  
knubbl

Header Logo Hover

Recommended Posts

knubbl

Hi, I have a question. I have a sprite map for my mainlogo, so that when I hover over it, it should display the same logo but with a slightly different text. I tried using CSS, but for some reason the code is always overridden and it doesn't seem to work.

Share this post


Link to post
Share on other sites
Rob
May we have a link to see this in action? Perhaps also an example of how it should look? Thanks.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
knubbl
Here is the original (and how it should work): https://www.consumerpool.de/ When you hover over the logo, the text below it changes (it's the same logo in two versions placed in a sprite map and controlled through CSS). Here is the site which uses your framework and I want to do the same there as well: http://consumerpoolblog.de/ I've tried several things but nothing worked.

Share this post


Link to post
Share on other sites
Danny
Is this now resolved ?

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
knubbl
I actually uploaded the logo sprite map through the Pagelines Framework Upload (where you should place your logo). And that was the code I used (obviously here the CSS class would be img.mainlogo-img a): a { display: block; width: 284px; height: 77px; background: transparent url([spritemapURL]) no-repeat 0 0; } a:hover { background: transparent url([spritemapURL]) no-repeat 0 -80px; }

Share this post


Link to post
Share on other sites
catrina
Try: [code]img.mainlogo-link a { display: block; width: 284px; height: 77px; background: transparent url([spritemapURL]) no-repeat 0 0; } img.mainlogo-link :hover { background: transparent url([spritemapURL]) no-repeat 0 -80px; }[/code]

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
knubbl
It doesn't seem to work. I tried a lot with CSS, I think the problem is with how the logo is loaded. It somehow replaces or rather overrides everything you place in the style.css file. I also tried it using the custom css form in the admin page but it doesn't work.

Share this post


Link to post
Share on other sites
kastelic
It is currently an image, so to make it a background, you have to hide the image and make the background apply to the anchor tag like this: [code].mainlogo-img { display: none } .mainlogo-link { display: block; width: 284px; height: 77px; background: transparent url([spritemapURL]) no-repeat 0 0; } .mainlogo-link:hover { background: transparent url([spritemapURL]) no-repeat 0 -80px; }[/code]

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×