html - 如何在悬停后保持链接可见

Question

我正在尝试让 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>

Answer 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