Thread: Want sidebar page links to become images when someone hovers over them.

Hi Sean,

Am I correct in saying you want to completely replace the link with an image or still have the link above it? If you don't want to use javascript then I can suggest creating images instead of links and using the mouse over attribute. Please Take a look at the example below which I have created for you.

<img src="carrotnormal.png" onmouseover="this.src='carrotimage.png';" onmouseout="this.src='carrotnormal.png';" />

carrotnormal.png would be the normal text link (well in this case an image that looks like text)

carrotimage.png would display the image of a carrot on mouseover.

--
I hope this helped you Sean, if you need any more help please feel free to reply and I will try to answer ASAP

I want my sidebar text links to turn into images when someone hovers over them.

Actually what you are trying to achieve is quite simple using a css child combinator selector with a hover pseudo sellector.
What you will want to do is load up your page in your browser and look at the source code and find the id for the element containing your links.

HTML Code:

<div id="linkcat-4" class="widget widget_links"><h2 class="widgettitle">Links</h2>
	<ul class='xoxo blogroll'>
              <li><a href="#">Red Bell Peppers</a></li>
              <li><a href="#">Green Beans</a></li>
              <li><a href="#">Kale</a></li>
              <li><a href="#">Cabbage</a></li>
              <li><a href="#">Celery</a></li>
              <li><a href="#">Carrots</a></li>
	</ul>
</div>

So in your style.css file

To select your first link your selector would be:

Code:

#linkcat-4 > ul li:nth-child(1):hover{}

To select your second link your selector would be:

Code:

#linkcat-4 > ul li:nth-child(2):hover{}

and so on for them all.

Then all you have to do is put your images in your images folder in the root of your wordpress site and set your background-image proprietys and set your #linkcat-4 ul li a:hover to display block and the widths and heights for your images. So your code should look something like this:

Code:

#linkcat-4 ul li a:hover {
	display:block;
	width: 200px;  /*  image width and height  */
	height:50px;
}
#linkcat-4 > ul li:nth-child(1):hover{
	background-image: url(images/anyimg.png) no-repeat; /* set image path  */
}
#linkcat-4 > ul li:nth-child(2):hover{
	background-image: url(images/anyimg.png) no-repeat; /* set image path  */
}
 And so on for the rest of your links

Hope this helps you out!!

Thank you Jeff for your response! I searched on google and could not find a lot about this. Maybe the wording just wasn't coming to me. Anyhow I got real busy with other website and life stuff, including switching hosts so I am going to be doing this when all of that clears. I wanted to say thanks though for your help here and I will respond with how it went once I am able to give this a shot.

No problem glade to help one more thing to add you may want to put a text-indent: -999999px; on #linkcat-4 ul li:hover to remove the text when the image pops up.