展开链接 div 并在其中添加链接答案

【问题标题】：Expand link div and add links within it展开链接 div 并在其中添加链接
【发布时间】：2011-05-06 11:43:27
【问题描述】：

我想要做的是，我有一个带有链接的 div 框（链接 1）。它是一个没有标题的 div 内的“a href”，因此您可以单击整个 div。我想要的是它的行为方式，但当您将鼠标悬停在它（链接 2 和 3）上时，它还会展开并显示另外两个链接，并在鼠标悬停时隐藏。

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

我得到的最接近的是这段代码。

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>

问题是，当我转到 divContent div 时它消失了，因为我不再在按钮 div 中了。

谁能帮忙？

编辑

谢谢 Moin Zaman，您的回答涵盖了我所寻找的大约 90% 的内容。我需要做的一件事是我需要整个原始 div 都是可点击的，除了出现 link1 和 link2 的区域。这样做的原因是，链接 1 是一个固定大小的 div 框，带有背景图像并且没有文本。悬停状态将背景更改为该图像的悬停版本。

【问题讨论】：

标签： javascript html css

【解决方案1】：

试试这个：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>

【讨论】：

这几乎正是我正在寻找的，我唯一的另一个问题是，有没有办法删除“链接 1”这个词使整个 div 可点击（链接到链接 1 的位置) 当您单击链接 2 和 3 以外的任何位置时。原因是，链接 1 是一个固定大小的 div 框，带有背景图像且没有文本。悬停状态更改为该图像的悬停版本。
您可以将 onclick 事件附加到 div。请问您需要此功能的场景是什么？另外，有没有理由需要用 JS 来做这件事？仅使用 CSS 就可以做到这一点。 IE6 需要一点技巧，否则如果你不关心 IE6，它几乎可以在任何地方工作。我会尽快尝试发布示例。
基本上我的导航有 5 个链接在页面的左半部分运行。这些链接是 div 框，带有代表链接的背景图像（无文本）。当您将鼠标悬停在它们上面时，背景图像会垂直移动 100%（例如 bit.ly/9leUSH）。当您将鼠标悬停在链接上时，它看起来像是在发光。这些导航链接之一是具有两个子类别的类别。所以在上面的例子中，链接 1 是类别，链接 2 和 3 是子类别。我希望链接 1 以它的方式运行，但还添加了几个额外的选项来加快网站的导航速度。
不一定是java，我想不出只用css的方法。

【解决方案2】：

您是否尝试过使用 jquery？应该使这更容易。可能是这样的：

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();
    }
);

【讨论】：

你不需要 jQuery。尤其是对于这样简单的事情
任何使用 javascript 的网站都可能会使用足够多的 JavaScript 来轻松证明使用 jQuery 恕我直言

【解决方案3】：

看看这个没有 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>

【讨论】：

：天哪，我可以吻你。通过一个小小的调整，我让它完全符合我的需要。你拯救了我的理智，我的页面看起来很棒。谢谢！
不客气！您可以通过接受评论作为答案来结束这个问题吗？