Продвинутый селектор для сиблинга

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 ссылка, то последняя будет работать. Текущий CSS (дерзость стиль), который не совсем работает в> 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). Надеюсь, один из вас, ребята, умнее меня.

Редактировать: Just gonna уточнить - I не может изменить структуру 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.

---

Однако, есть много плагинов, которые держат эту концепцию в качестве базы и работы при наведении-карт и подсказками. Некоторые хорошие примеры включают в себя:

• jQuery UI Tooltip
• Tipsy
• HoverCard
• 40+ Tooltips Scripts With AJAX, JavaScript & CSS

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 текущего анкерного элемента & отобразите соответствующий номер div, присутствующий в ex location.

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