asked on

Disappear Hyperlink Text on Hover

I have a hyperlink, I want to have an arrow image next to text normally, but on hover, I want the text to go away and an image to display instead.

here is my code:

#MenuHome a
{
display: block;
font-family: Tahoma, Arial, Verdana;
font-size: 12px;
color: white;
width: 65px;
height: 23px;
text-decoration: none;
background: none;
text-align: center;
font-weight: bold;
vertical-align: middle;
}

#MenuHome a:hover
{
background: url( "images/home.gif" ) no-repeat center center;
}

Right now, on hover, the image displays behind the text, but I want the text go disappear.

thanks.

yo_s_canta

Hello,

Try this code .....

Have a nice day,
Andrew

<style>
	#myid {
		background:white;
		border:1px solid black;
		display:block;
		height:20px;
		width:100px;
	}
	#myid:hover { 
		background:red;
	}
	#myid:hover div {
		display:none;
	}
</style>
<a id="myid">
    <div id="text">Button</div>
</a>

Open in new window

Starr Duskk

ASKER

That makes my home.gif image disappear too.

Please look at MY example....

#MenuHome a:hover
{
background: url( "images/home.gif" ) no-repeat center center;
}

SOLUTION

yo_s_canta

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER CERTIFIED SOLUTION

Warpseh