jquery - 将鼠标悬停在一个元素上以更改另一个元素

Question

无法使其工作，我试图在悬停在 Proj name1/Proj name2 上时更改 prevProject 和 nextProject(文本:prev/next)的样式。

我可以做这部分，请看演示。

演示:http://jsfiddle.net/h2P34/1/

<div id="project-navigation">
    <ul>

        <li id="prevProject" class="subtitle">
            <a href="#"><p>prev</p></a>
            <a id="prev_target_title">Proj name1</a>
        </li>


        <li id="nextProject" class="subtitle">
            <a href="#"><p>next</p></a>
            <a id="next_target_title">Proj name2</a>
        </li>

    </ul>  
</div>

Answer 1

这在 CSS 中是做不到的。您的代码 #prev_target_title:hover ~ #project-navigation ul li#prevProject p 将不起作用，因为波浪号 (~) 是一般的兄弟选择器。当 #prev_target_title 处于悬停状态时，浏览器正在寻找 #project-navigation 之后的任何位置。

在 CSS 中，您不能选择 previous sibling 姐妹，也不能选择 parent 。解决方法是在 HTML 代码中将 prev/next 放在元素名称之后，然后使用 CSS 使它们的顺序在视觉上有所不同。然后，当悬停元素名称时，您可以突出显示 prev。