如何创建隐藏的链接列表，以便当我将鼠标悬停在主链接上时，所有其他链接都会显示？ [关闭]答案

【问题标题】：How do I create a list of links that are hidden so when I hover over the main link all the other links show up? [closed]如何创建隐藏的链接列表，以便当我将鼠标悬停在主链接上时，所有其他链接都会显示？ [关闭]
【发布时间】：2014-02-27 00:28:14
【问题描述】：

我想创建一个链接列表，所以当我将鼠标悬停在最上面的链接上时，其余的链接就会显示出来。如果这个问题已经回答了指向我。我已经搜索并找不到它。有点像当我将鼠标悬停在 this website 上的链接上时，它下方会显示更多链接。

【问题讨论】：

从这里开始：learn.jquery.com

标签： javascript jquery html css

【解决方案1】：

使用 Jquery 的 hover、show 和 hide 方法。

【讨论】：

请不要仅仅链接到其他网站作为答案，我建议您完全避免 W3Schools 链接。

【解决方案2】：

如果您使用的是 Jquery：

<a class='mainlink'>main Link</a>
<a class='sublink'>SubLink</a>
<a class='sublink'>Sublink</a>

javascript：

$('.mainLink').hover(
    function(){
        $('.sublink').show();
    },
    function(){
        $('.sublink').hide();
    });

但是，除了粘贴这个，我肯定会阅读 Jason P 的教程。

【讨论】：

【解决方案3】：

我假设您在谈论嵌套级联菜单。 This 教程会帮助你。

【讨论】：

【解决方案4】：

HTML：

<ul id="yourid1"><li>content</li><li>content</li></ul>

CSS：

ul#yourid1 { height: -insert-height-of-one-li }
ul#yourid1:hover { height: -insert-full-height }

【讨论】：

【解决方案5】：

有两个<span> 或<div> 并在第一个中插入主链接并使其可见，并使其他链接不显示并在第二个中显示。

('MAIN LINK SPAN OR DIV').hover(
  function () {
    $("CHILD LINKS SPAN OR DIV").show();
  }, 
  function () {
    $("CHILD LINKS SPAN OR DIV").hide();
  }
);

【讨论】：