Home/ Questions/Q 3353628
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T02:10:28+00:00

What I’m trying to do is, I have a div box with a link

  • 0

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.

https://i.stack.imgur.com/83rV2.png

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>​
    • 0