Expand link div and add links within it
What I'm trying to do is, I have a div box with a link (link 1). It an "a href" inside a div with no title so you can click on the whole div. What I want is for this to behave the way it does but also expand and reveal two more links when you hover over it (link 2 and 3) and hide when you mouseout.
http://i.stack.imgur.com/83rV2.p开发者_如何学编程ng
The closest I've gotten is this bit of code.
Java:
<script type="text/javascript">
function showhide(id, visibility) {
document.getElementById(id).style.display = visibility;
}
</script>
CSS:
<div id="button"> <a href='/page' onMouseOver="showhide('divContent','inline');"
onMouseOut="showhide('divContent','none');"
onfocus="showhide('divContent','inline')";
onBlur="showhide('divContent','none')";></a> <div id="divContent">Link</div>
</div>
Problem with this is, the divContent div disappears when I go to it because I'm not in the button div anymore.
Can anyone help?
EDIT
Thank you Moin Zaman, you answer covers about 90% of what I was looking for. One partular thing I need out of this is I need the entire original div to be clickable, aside from the area where link1 and link2 appear. The reason for this is, link 1 is a fixed size div box with a background image and no text. The hover state changes the background to a hover version of that image.
Try this: http://jsbin.com/ohope4/3
<!doctype html>
<html>
<head>
<title></title>
<style type="text/css">
html,body,h1,h2,h3,h4,h5,p,ul,li,form,button { margin:0; padding:0 }
body { font:normal 62.5% arial; margin:20px }
#button { background:#808080; padding:25px 10px 5px 10px; width:80px; text-align:center; }
#button a { text-transform:uppercase; text-decoration:none; font-size:1.2em; color:#000; }
#link2,#link3 {display:none; font-size:0.9em;}
#link1 { display:block; text-align:center; padding-bottom:25px }
</style>
</head>
<body>
<div id="button">
<a id="link1" href="#">link 1</a>
<a id="link2" href="#">link 2</a>
<a id="link3" href="#">link 3</a>
</div>
<script type="text/javascript">
window.onload = function() {
var divButton = document.getElementById("button");
divButton.onmouseover = ShowLinks;
divButton.onmouseout = HideLinks;
};
function ShowLinks(){
document.getElementById('link2').style.display = 'inline';
document.getElementById('link3').style.display = 'inline';
}
function HideLinks(){
document.getElementById('link2').style.display = 'none';
document.getElementById('link3').style.display = 'none';
}
</script>
</body>
</html>
have you tried using jquery? should make this a lot easier. maybe something like:
html:
<div>
<a id="link1" href="#">link 1</a>
<a id="link2" href="#">link 2</a>
<a id="link3" href="#">link 3</a>
</div>
javascript:
$("a#linkone").hover(
// when mouse enters
function() {
$("a#linketwo").show();
$("a#linkthree").show();
},
// when mouse leaves
function() {
$("a#linketwo").hide();
$("a#linkthree").hide();
}
);
Have a look at this approach without JS: http://jsbin.com/osige4
<!doctype html>
<html>
<head>
<title></title>
<style type="text/css">
html,body,h1,h2,h3,h4,h5,p,ul,li,form,button { margin:0; padding:0 }
body { font:normal 62.5% arial; margin:20px }
#button { background:#808080; padding:25px 10px 5px 10px; width:80px; text-align:center; cursor:pointer }
#button a { text-transform:uppercase; text-decoration:none; font-size:1.2em; color:#000; }
#link2,#link3 {display:none; font-size:0.9em;}
#link1 { display:block; text-align:center; padding-bottom:25px }
#button:hover #link2, #button:hover #link3 { display:inline; }
</style>
</head>
<body>
<div id="button">
<a id="link1" href="#">link 1</a>
<a id="link2" href="#">link 2</a>
<a id="link3" href="#">link 3</a>
</div>
</body>
</html>
加载中,请稍侯......
精彩评论