Question

我无法理解这一点。我有以下结构：

<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; 1链接，那么最后一个链接将起作用。当前的css（sass风格）在＆gt; 1个案例中并不起作用：

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

我不能改变html的结构，它总是容器＆gt;所有链接后跟所有poptips。然而，我可以使用唯一标识符标记poptips和锚标记，例如<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，但我的整个难题是我无法做到这一点。

Answer 1

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

$('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。

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

Answer 2

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>

Answer 3

使用jquery这可以很容易地实现，只需要获取当前锚元素的index＆amp;显示索引位置的相应div。

HTML CODE：

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

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

Live Demo @ JSFiddle

高级兄弟选择器

3 个答案: