Question

我有一个包含3个链接的网页。其中一个链接由具有display：none的父div隐藏。然而，当我将鼠标悬停在另一个div上时，将显示隐藏的div，从而显示链接。如何选中所有3个链接，并在我选择链接时自动显示链接3？

<html>
 <head>
  <title>Skype Home</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
  <style>
   a,.hoverMe{
    display:block;
    width:50px;
    height:50px;
    margin-bottom:10px;
    background-color:#CCC;
   }
   .hoverMe{
    background-color:pink;
    width:100px;
    height:50px;
   }
   .hiddenDiv{
    visibility:hidden;
   }
   .hiddenDiv.shown{
    visibility:visible;
   }
  </style>
  <script>
  $(document).ready(
   function(){
    $(".hoverMe").hover(
     function(){
      $(".hiddenDiv").addClass("shown");
     },
     function(){
      $(".hiddenDiv").removeClass("shown");
     }
    )
   }
  );
  </script>
 </head>
 <body>
  <a href="#1">Link 1</a>
  <a href="#2">Link 2</a>
  <div class="hoverMe">hover me to open Link 3</div>
  <div class="hiddenDiv">
   <a href="#3">Link 3</a>
  </div>
 </body>
</html>

Answer 1

使用JavaScript。

向锚点添加onfocus和onblur处理程序，以切换父div上的类。编辑样式表以在设置类时显示它。

还添加一个标志以指示JS存在，例如

<body>
<script type="text/javascript">
document.body.className += " js";
</script>

...并保护隐藏div的规则，首先使用body.js后跟一个后代选择器（因此非JS用户仍然可以访问该内容）。

用标签浏览隐藏在网页上的链接（辅助功能问题）

1 个答案: