Question

无法使其发挥作用，我试图改变prevProject＆amp; amp; nextProject（文本：prev / next），同时将鼠标悬停在Proj name1 / Proj name2上。

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

<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将无效，因为代字号（〜）是一般的兄弟选择器。当#project-navigation后者处于悬停状态时，浏览器正在查找#prev_target_title之后的任何地方。

在CSS中，您无法选择以前的兄弟姐妹，也无法选择父母。解决问题的方法是在HTML代码中将项目名称后的prev / next放置，然后使用CSS使它们的顺序在视觉上不同。然后，您可以突出显示项目名称悬停时的上架时间。

Answer 2

我会做像

这样的事情

$("#prev_target_title").hover(function(){
    $("#prevProject a p").css("color","red");
});

$("#prev_target_title").on('mouseleave',function(){
    $("#prevProject a p").css('color','black');
});

但我也会使用类名而不是ids

//changing color to red
$(".hoverClass").hover(function(){
    $(this).parent().find("a p").css("color","red");
});

//changing it back to black
$(".hoverClass").on('mouseleave',function(){
    $(this).parent().find("a p").css("color","black");
});

我们在这里使用Jquery，你不能用简单的css做到这一点。

检查这个小提琴，我希望它有所帮助 http://jsfiddle.net/rqg87/

正如杰森所指出的，悬停需要2个参数 - mouseenter和mouseleave ......所以：

$(".hoverClass").hover(
    function(){ $(this).parent().find("a p").css("color","red"); },
    function(){ $(this).parent().find("a p").css("color","black");}
);

优化的解决方案是： http://jsfiddle.net/P7Zbz/

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

2 个答案: