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

我看到您在display: inline div上使用了#portifolio，因此链接将是双面的。但这确实让你的徘徊工作得很好。

您可以改为使用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.在投资组合＆lt;之后关闭div / A＆GT;没有正确关闭。 2.你必须删除脚本末尾的第二个结束div。

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

4 个答案: