1

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

好吧，我有这个列表，它的每个项目都必须触发一个 div 来表现得很好。我正在尝试使用 CSS3 的兄弟选择器波浪号，并在调用 li 时使 div 有一个 left:0 。唯一的问题是 simbling 选择器仅在对象没有自己的父对象时才有效。我试过把它称为“#father-element #child-element:hover ~ #father-element2 #child-element 2”之类的洞族，但它完全忽略了我，就像我是个白痴一样。

这是headburner的简化版本的链接：http: //jsfiddle.net/GuiHarrison/rDnYE/

所以你们怎么看，伙计们？我应该闭嘴尝试 jQuery（如果是，怎么做？）还是 CSS 中真的有办法？

4

1 回答 1

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/

于 2012-06-22T04:52:39.277 回答