css - 悬停一个元素会影响另一个元素。不是 sibling 也不是 child

Question

我目前正在为大学做一个实验性的页面，我遇到了一个简单的问题，大量的大脑被烧伤了。这个想法是您无需单击任何内容即可浏览网站，从而为用户提供非常流畅、轻松的体验。

好吧，我有这个列表，它的每个元素都必须触发一个 div 才能出现并且很好。我正在试验 CSS3 的同级选择波浪号，并在调用 li 时使 div 有一个 left:0。唯一的问题是模拟选择器只有在对象没有自己的父对象时才有效。我试过称它为 hole 系列，例如“#father-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/