CSS Rollover Link

HTML & CSS
1

Hi there,

I’ve created tonnes of CSS Rollovers before so usually know what I’m doing but for whatever reason it doesn’t seem to be working this time around.

I’m trying to create some Social Media links using Rollover Images as the links.

This is the HTML Code:

<div id="SocialMedia">
      <ul id="SocialMedia">
            <li class="FbHeaderLink"> <a class="SocialButton" href="http://facebook.com/#" title="Find us on Facebook" target="_blank">  </a>'; </li>
      </ul>
</div>

And I have applied the following CSS Styling:

div#SocialMedia {
	float:right;
	padding-top:20px;
}

ul#SocialMedia {
	list-style-type:none;
	display:inline;
	padding: 0;
	margin: 0;
	list-style: none;
	outline: none;
	z-index: 1000;
}

li.FbHeaderLink {
	background-image: url('/wp-content/themes/spectrum/images/icons/FacebookRoundLarge.png');
	width: 40px;
	height: 40px;
}
	
li.FbHeaderLink:Hover {
	background-image: url('/wp-content/themes/spectrum/images/icons/FacebookRoundLarge.png');
	background-position: 0 -41px;
	width: 40px;
	height: 40px;
}
	
#SocialMedia li.FbHeaderLink a.SocialButton {
	width: 40px;
	height: 40px;
}

As I said, I have done this before and it works perfectly. However, this time around it doesn’t seem to put the link there. The background image is there. The <li> changes background as you hover it as expected and changes back on mouseout. But the link isn’t actually there even though I have styled it to be 40x40.

The result of this is that the “title” element of the link is not being displayed when you mouseover it and obviouslly, the button is doing nothing but change colour!

Any ideas why it’s not working this time around? Am I blindly forgetting to do something?

2

Well I CAN tell you that the anchor isn’t 40x40 because it’s default as an inline element. As such it doesn’t accept width/height properties. Give it display:block and see if it works there :).

3

That did the trick - thank you. sometimes it just needs a fresh pair of eyes to spot the error that’s so blatantly obvious :slight_smile:

4

your pseudo class should be on your anchor tag surely eg a:hover ??

5

You’re welcome, glad it worked :). Such simple mistakes, eh?

6