HTML/CSS mouse hover image hides

Question!

I have 2 images, 1 shows the word "home" and another shows "home" with some arrows pointing to it from above.. basically a little thing to spice up my website that im working on as part of my studies.

What would be the easiest way to transition from the blank image to the arrow' image? without using fancy JavaScript? i don't like javascript and would prefer not to use it.

My HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="styles/styles.css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>This is my website :D</title>
</head>
<body>
    <div id="banner"><img id="logo" src="images/logo.png" />
        <div id="menucontainer">
            <div class="menulink" id="menu1"><a href="index.html"><img border="0" id="arrow1" src="images/arrow1blank.png" /><img border="0" id="arrow1popup" src="images/arrow1.png"  /></a></div>
            <div class="menulink" id="menu2"><a href="#">About Us</a></div>
            <div class="menulink" id="menu3"><a href="#">Services</a></div>
            <div class="menulink" id="menu4"><a href="#">Account</a></div>
        </div>
    </div>
</body>
</html>

and CSS:

#banner {
    background-color:#000000;
    height:100px;
    position:absolute;
    top:0;
    left:0;
    right:0;
}
#logo {
    position:absolute;
    left:350px;
}
#menucontainer {
    position:relative;
    left:750px;
    top:0px;
    right:350px;
    height:100px;
}
#menu1 {
    float:left;
    text-align:center;
    width:120px;
    height:100px;
}
#menu2 {
    float:left;
    width:120px;
    text-align:center;
    height:100px;
}
#menu3 {
    float:left;
    text-align:center;
    width:120px;
    height:100px;
}
#menu4 {
    float:left;
    width:120px;
    text-align:center;
    height:100px;
}

Thanks in advance guys :)

By : Gobble45


Answers

Simply add this snippet would work.

.menulink:hover { background-img:url('images/arrow1blank.png'); }
.menulink:hover a { display:none; }


Try this:

.menulink       img#arrow1popup { display: none;   }
.menulink:hover img#arrow1popup { display: inline; }
.menulink:hover img#arrow1      { display: none;   }


This video can help you solving your question :)
By: admin