Наведите элемент на другой. Не брат или ребенок

Question

В настоящее время я делаю экспериментальную страницу для колледжа, и я столкнулся с простой проблемой с огромным количеством мозга, сожженного. Идея состоит в том, что вам не нужно щелкнуть ничем, чтобы перемещаться по сайту, предоставляя пользователю очень легкий, легкий опыт.

Ну, у меня есть этот список, в котором каждый из его предметов должен запускать div, чтобы прийти и быть хорошим. Я экспериментировал с тильдой sibling для CSS3 и делал div влево: 0 при вызове li. Единственная проблема заключается в том, что селектор simbling работает только в том случае, если у объекта нет родительского элемента. Я пробовал называть его семейством дыр вроде «# parent-element # child-element: hover ~ # father-element2 # child-element 2», но он полностью игнорирует меня, как будто я какой-то идиот.

Вот ссылка упрощенной версии headburner: http://jsfiddle.net/GuiHarrison/rDnYE/

Так что же вы думаете, ребята? Должен ли я заткнуться и попробовать jQuery (если да, как?) Или действительно есть способ в CSS?

Answer 1

Вы можете достичь этого, делая некоторые изменения в разметке приведены ниже:

HTML:

<ul> 
    <li id="cinco">item1</li> 
    <li id="seis">item2</li> 
    <li id="sete">item3</li> 
    <li id="oito">item4</li> 

    // As you've defined these items' position as absolute so no matter if you define them as list items. 
    <li id="e"> 
     <div>This should work now - cinco</div> 
    </li> 
    <li id="f"> 
     <div>This should work now - seis</div> 
    </li> 
    <li id="g"> 
     <div>This should work now - sete</div> 
    </li> 
    <li id="h"> 
     <div>This should work now - oito</div> 
    </li> 
</ul> 

CSS:

ul {margin-top:10px; position: relative} 
    ul li#cinco:hover ~ #e, 
    ul li#seis:hover ~ #f, 
    ul li#sete:hover ~ #g, 
    ul li#oito:hover ~ #h { left:300px; background-color:#BADA55; } 

Смотрите демо здесь: http://jsfiddle.net/rathoreahsan/gew5B/