高级同胞选择器

Advanced sibling selector

本文关键字：选择器 高级同      更新时间：2023-09-26

我不太明白。我有以下结构:

<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的结构，它总是容器>所有链接后面跟着所有提示。然而，我可以用唯一标识符标记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包装每个元素，但我的整个难题是我不能这样做。

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

$('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解决方案。您可以在这里看到的工作。

然而，有很多插件，保持这个概念为基础，并为悬停卡和工具提示工作。一些好的例子包括:

    jQuery UI工具提示
  • 醉了
  • HoverCard
  • 40+工具提示脚本与AJAX, JavaScript &CSS

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>

使用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');
   });
});

现场演示@ JSFiddle

相关文章：