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

Question

我试图让链接AgentSheets，Gimp和InkScape显示组合链接悬停时的链接。我已经实现了这个目标，但是无论何时将鼠标从投资组合中移出，点击其中一个链接，它们都会消失，因为投资组合已不再被覆盖。任何人有任何建议？谢谢！

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

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

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

Answer 4

1.您的后组合</A>闭DIV未正常关闭。 2.您必须删除脚本末尾的第二个关闭div。