javascript - 如何使用 HTML 和 CSS 或 jQuery 和 CSS 创建类似工具提示的 'linklist'？

Question

我希望你能帮助解决我的问题。任何帮助深表感谢。提前谢谢你。

HTML&CSS:

我尝试用 HTML 和 CSS 创建一个“链接列表”，您可以找到它 in this fiddle.不幸的是，从逻辑上讲，“链接列表”通过将鼠标悬停在链接“链接列表”上来显示，如果离开链接，则不会有任何显示。

我的问题是，由于离开了“链接列表”，我无法点击“链接 1”或“链接 2”。好吧，我在这里看到两个选项，但也许我错了。1. 通过将鼠标悬停在“链接列表”上，“链接列表”会出现，例如1分钟。2. 是否可以像我一样连接更多链接？ “链接列表”将是指向网站的链接。将鼠标悬停在该链接上应该会显示一个链接列表，我可以选择。

有什么想法吗？

---

jQuery 和 CSS:

关于我的第一个问题，我想将我的想法转换为 jQuery。

这些链接包含一张图片。通过单击它，将加载一个新站点。

<a href="?FRUIT=banana><img height="40" src="../../banana.jpg?format=raw" title="Banana - yellow"></a>
<a href="?FRUIT=apple><img height="40" src="../../apple.jpg?format=raw" title="Apple - green"></a>

我的第一个问题是我应该使用 .mouseover() 还是 .hover()。那么，通过将鼠标悬停在该图像上，应该会出现一个带有 Link1 和 Link2 的框。就像一个上下文菜单，但我不想通过右键单击来查看该框，而是将鼠标移到它上面。

这就是我如何获得标题的颜色并用 3px 的绿色点缀给图像加边框:

var colors = ['yellow','green'];
for(var i = 0;i < colors.length;i++){
 $('img[title$='+colors[i]+']').css('border','3px dotted green');
 var title =  $('#'+colors[i]).attr('title');
}

我希望显示一个包含两个链接的框，而不是为其添加边框。

任何提示或帮助都会非常有帮助。

Answer 1

在我看来，您更喜欢弹出式导航解决方案而不是工具提示。这主要可以通过 HTML 和 CSS 来完成，javascript 只需要模仿 :hover 行为而不是 <a>。 .

示例请参见此处 http://www.positioniseverything.net/css-flyout.html