Question

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

嗯，我已经有了这个列表，每个项目必须触发一个div才能过来并且很好。我正在试验CSS3的兄弟选择器代字号并使div有一个左：0当调用li时。唯一的问题是simbling选择器只有在对象没有自己的父级时才有效。我曾经试过把它称为“＃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/

悬停元素会影响另一个元素。不是兄弟姐妹也不是孩子

1 个答案: