高级兄弟选择器[重复]答案

【问题标题】：Advanced sibling selector [duplicate]高级兄弟选择器[重复]
【发布时间】：2015-11-25 05:36:42
【问题描述】：

我无法完全理解这一点。我有以下构造：

<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，如果有一个链接（通常是这种情况），这显然可以正常工作。在任何情况下，如果有 >1 个链接，那么最后一个链接将起作用。当前的 css（sass 样式）在 >1 种情况下不太适用：

.producttooltip {
  position: relative;
}
.producttooltip a:hover + div {
  display: block;
}

我无法更改 html 的结构，它始终是容器 > 所有链接后跟所有弹出提示。但是，我可以使用唯一标识符标记弹出提示和锚标记，例如<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 包装每个元素，但我的整个难题是我不能这样做。

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

jQuery 解决方案

您可以使用mouseenter/mouseleave 事件来显示所需的元素

$('a').on('mouseenter', function() {
  var i = $(this).index();
  $('.poptip').eq(i).show();
}).on('mouseleave', function() {
  $('.poptip').hide();
});

.poptip { 
  width:100%;
  float:left;
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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">Some content related to link 2 retreived with ajax</div>
     <div class="poptip">Some content related to link 3 retreived with ajax</div>
</div>

【讨论】：

【解决方案2】：

在你的情况下，你可以这样做：

$('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;}

&lt;a href="#"&gt;Hover Me!&lt;span class="tooltip"&gt;Hello, World!&lt;/span&gt;&lt;/a&gt;

这只是纯 CSS 解决方案之一。你可以看到工作的fiddle here。

但是，有很多插件将这个概念作为基础并适用于悬停卡片和工具提示。一些很好的例子包括：

【讨论】：

提问者说我不能改变html的结构，它总是容器>所有的链接后面跟着所有的poptips。
@FrédéricHamidi 这只是一个入门指南。好的，我也可以为此添加一个具体的答案。谢谢你告诉我。
如前所述，我无法更改结构。不过，您的解决方案本来应该是漂亮而简单（甚至正确）的解决方案。
@Dennis 是的，我已经更新了我的答案。请看一看。我坚持，如果你有机会改变结构，你可以使用 CSS 解决方案。我为此提供了一个 jQuery 解决方案。

【解决方案3】：

使用jquery可以轻松实现，只需要获取当前锚元素的index并在索引位置显示相应的div。

HTML 代码：

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

JS 代码：

$(function(){
   $('a').on('hover',function(){
      var ind = $('a').index(this);
      $('.poptip').eq(ind).css('display','block');
   });
});

Live Demo @ JSFiddle

【讨论】：