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.
LVL 2
Starr DuskkASP.NET VB.NET DeveloperAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
WarpsehConnect With a Mentor Commented:
How about this?
<div id="MenuHome">
<img src="arrow.gif" /><a href="#"><span>Go</span></a>
 
#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;
}
 
#MenuHome a:hover span
{
    display: none;
}

Open in new window

0
 
yo_s_cantaCommented:
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

0
 
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
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;
}



0
 
yo_s_cantaConnect With a Mentor Commented:
Try now
<style>
        #myid {
                background:white;
                border:1px solid black;
                display:block;
                height:20px;
                width:100px;
        }
        #myid:hover { 
                background:url( "images/home.gif" ) no-repeat center center;
        }
        #myid:hover div {
                display:none;
        }
</style>
<a id="myid">
    <div id="text">Button</div>
</a>

Open in new window

0
 
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
Warpseh's solution works perfectly. Yo's wasn't quite there and still didn't work. But I gave you points for getting close.

0
All Courses

From novice to tech pro — start learning today.