<分区>
标签 javascript jquery html css
<分区>
我不太明白这个问题。我有以下构造:
<div class="container">
for n = 0 to ...
<a href="some url">Link n</a>
endfor
for each link in ".container"
<div class="poptip"></div>
endfor
</div>
举个例子:
<div class="container">
<a href="some url">Link 1</a>
<a href="some url">Link 2</a>
<a href="some url">Link 3</a>
<div class="poptip">Some content related to link 1 retreived with ajax</div>
<div class="poptip">...</div>
<div class="poptip">...</div>
</div>
现在是障碍，我正在尝试显示 .poptip悬停在 anchor 标记上，如果有一个链接(通常是这种情况)，这显然可以正常工作。在任何情况下，如果有 >1 个链接，则最后一个将起作用。当前的 css(sass 样式)在 >1 情况下不太有效:
.producttooltip {
position: relative;
}
.producttooltip a:hover + div {
display: block;
}
我无法更改 html 的结构，它始终是容器 > 所有链接后跟所有弹出提示。但是，我可以使用唯一标识符标记弹出提示和 anchor 标记，例如<a href="some url" rel="identifier">Link 1</a><div class="poptip" rel="identifier"></div> ，但我不太清楚我在 css 中是否可以创建一个通用选择器(伪):
a:hover + div[rel=a.rel] {
display: block
}
所以我的问题是，我可以用纯 CSS 标记这个构造，还是我必须使用一些 JS 技巧(我可以，但我真的更喜欢 CSS)。希望你们中的一个比我更聪明。
编辑:只是澄清一下 - 我不能更改 html 的结构。最简洁的解决方案显然是用等效的 poptip 包装每个元素，但我的整个难题是我不能这样做。
最佳答案
在您的情况下，您可以这样做:
$('a').on('hover', function() {
$('.poptip').eq($(this).index()).show();
}, function() {
$('.poptip:visible').hide();
});
单靠 CSS 很难做到这一点。但即便如此，我还是在下面提供了一个 CSS 解决方案。如果您想考虑仅使用 CSS 的解决方案，请务必查看。
您可以通过 CSS 本身来完成此操作。虽然有很多插件，但让我们做这样的事情。首先，您需要一个悬停元素，在本例中是一个链接。
<a href="#">Hover Me!</a>
接下来应该是工具提示。我们可以有一个<span>现在把它放在链接里。
<a href="#">Hover Me!<span class="tooltip">Hello, World!</span></a>
现在是真正的 CSS 部分。
a span {display: none; position: absolute; color: #fff; background: #000; padding: 5px;}
a {position: relative;}
a:hover span {display: block; text-align: center;}
片段
a span {display: none; position: absolute; color: #fff; background: #000; padding: 5px;}
a {position: relative;}
a:hover span {display: block; text-align: center;}<a href="#">Hover Me!<span class="tooltip">Hello, World!</span></a>这只是纯 CSS 解决方案之一。你可以看到工作 fiddle here .
但是，有很多插件将此概念作为基础并用于悬停卡和工具提示。一些很好的例子包括:
关于javascript - 高级兄弟选择器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32306940/