悬停后如何保持链接可见答案

【问题标题】：How to keep links visible after hovering悬停后如何保持链接可见
【发布时间】：2014-06-27 15:27:24
【问题描述】：

我正在尝试让 AgentSheets、Gimp 和 InkScape 的链接在 Portfolio 的链接悬停时显示。我已经做到了，但是每当鼠标从投资组合中移动到单击其中一个链接时，它们就会消失，因为不再将鼠标悬停在投资组合上。有人有什么建议吗？谢谢！

CSS：

#portfolio:hover + #portfolio2 {
    display:block;
}

#portfolio2 {
    display:none;
}

#portfolio {
    width:70px;
    display:inline;
}

HTML：

<div id="portfolio"><a href="portfolio.html" onClick="readCookie();">Portfolio</a>div>
<div id="portfolio2">
<a href="portfolio_Sim.html" onClick="readCookie();">Agentsheets</a>
<a href="portfolio_Gimp" onClick="readCookie();">Gimp</a>
<a href="portfolio_Ink" onClick="readCookie();">InkScape</a>
</div>
</div>

【问题讨论】：

display:none; 表示该 div 中的任何内容都将不可见。（w3schools.com/css/tryit.asp?filename=trycss_display_none）您的意思是当您从portfolio 链接中移除鼠标时，所有其他链接都会消失？跨度>

标签： html css hyperlink hover

【解决方案1】：

要使这种效果起作用，portfolio2 div 应该在主 div 内

HTML

<div id="portfolio"><a href="portfolio.html" onClick="readCookie();">Portfolio</a>

    <div id="portfolio2">
<a href="portfolio_Sim.html" onClick="readCookie();">Agentsheets</a>

<a href="portfolio_Gimp" onClick="readCookie();">Gimp</a>

<a href="portfolio_Ink" onClick="readCookie();">InkScape</a>

    </div>
</div>

CSS

那么CSS就变成了

#portfolio:hover #portfolio2 {
    display:block;
}
#portfolio2 {
    display:none;
}
#portfolio {
    display: inline-block;
    border:1px solid red;
}

注意：这将导致父 div 的大小发生变化，这可能不是您所需要的。

JSfiddle Demo

【讨论】：

【解决方案2】：

我看到您在#portifolio div 上使用了display: inline，因此链接将是侧面的。但这实际上让您的悬停工作正常。

您可以改用white-space: nowrap，因此<a> 链接将保持内联。另外，删除 css + 选择器，因为它不适用于这种情况。

所以你的 css 代码是：

#portfolio:hover #portfolio2 {
    display:block;
}

#portfolio2 {
    display:none;
    white-space: nowrap;
}

#portfolio {
    width:70px;
}

另外，你必须更正html：

<div id="portfolio"><a href="portfolio.html" onClick="readCookie();">Portfolio</a>
    <div id="portfolio2">
        <a href="portfolio_Sim.html" onClick="readCookie();">Agentsheets</a>
        <a href="portfolio_Gimp" onClick="readCookie();">Gimp</a>
        <a href="portfolio_Ink" onClick="readCookie();">InkScape</a>
    </div>
</div>

这是一个小提琴：http://jsfiddle.net/G3S82/

【讨论】：

【解决方案3】：

类似的解决方案。同样，您必须将隐藏的 DIV 放在可见的 DIV 中。并使用此 CSS，它可以保持元素的所需（固定）宽度：

#portfolio {
    width:70px;
    background: green;
}
#portfolio2 {
    display:none;
    width: 200px;
    background: lightblue;
}
#portfolio:hover > #portfolio2 {
    display:block;
}

http://jsfiddle.net/sLLQA/1/

【讨论】：

【解决方案4】：

1.您在 Portfolio 之后的关闭 div 没有正确关闭。 2.您必须在脚本末尾删除第二个关闭div。

【讨论】：