Question

我要做的是，我有一个带有链接的div框（链接1）。它是div中的“a href”，没有标题，所以你可以点击整个div。我想要的是它的行为方式，但是当你将鼠标悬停在它上面时（链接2和3）也会扩展并显示另外两个链接，并在你鼠标移除时隐藏它。

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

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

爪哇：

<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框，背景图像没有文字。悬停状态将背景更改为该图像的悬停版本。

Answer 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>

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

Answer 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>

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

3 个答案: