jQuery 鼠标悬停 +鼠标移开+单击以更改多个 (2)CSS 类/样式

Question

我有一个

列表，其中包含 2 个
• ，如下所示：

HTML:

<div id="list">
    <ul>
        <li>name1</li>
        <li>title1</li>
    </ul>

    <ul>        
        <li>name2</li>
        <li>title2</li>
    </ul>

    <ul>
        <li>name3</li>
        <li>title3</li>
    </ul>

    <ul>        
        <li>name4</li>
        <li>title4</li>
    </ul>
and so on...
</div>

CSS:

#list {color: grey}
.name {color: black}
.title {color: red}

输出如下所示（文本均为灰色）：

姓名1 标题1
姓名2 标题2
姓名3 标题3
name4 title4

当您将鼠标悬停任何

时，其每个
• 都会获得一个应用于外观的类像这样（斜体是 .name 类，粗体是 .title 类）：

name1 title1
姓名2 标题2
name3 title3 <~鼠标悬停
name4 title4

当您鼠标移开时，它会返回。

此外，当您单击其中一个

时，它将保持鼠标悬停状态的样式并触发

最后，当页面首次加载时，第一个

必须是选定的，如下所示：

name1 标题1
姓名2 标题2
姓名3 标题3
name4 title4

我只能完成其中一个功能，比如 click，但不能完成所有 3 个功能。我是 jQuery 新手，所以像这样的多个功能让我的大脑陷入混乱。

如果有任何帮助让我朝着正确的方向前进，我将不胜感激。

Answer 1

下面应该做到这一点。如果您打算在其中添加 标记，可能需要进行一些小的调整，但是使用提供的 HTML 结构，这应该可以实现您正在寻找的内容。

$(function(){
    $("#list ul li").hover(function(){
        $(this).parent().children().first().addClass('name');
        $(this).parent().children().last().addClass('title');
    },function(){
        $(this).parent().children().first().removeClass('name');
        $(this).parent().children().last().removeClass('title');               
    }).click(function(e){

        $(this).parent().children().first().addClass('perm-name');
        $(this).parent().children().last().addClass('perm-title');
    }); 
    $("#list ul li").first().trigger('mouseover');

});

和 CSS：

#list {color: grey}
.name,.perm-name {color: black}
.title,.perm-title {color: red}

工作示例。

Answer 2

感谢您对 Niklas 的帮助。
第一个

仍处于“鼠标悬停”状态，因此我将代码修改为如下所示，并且一切正常！
没有你我不可能做到这一点。

$(function(){
    $("#list ul li").mouseenter(function(){
        $(this).parent().children().first().addClass('name');
        $(this).parent().children().last().addClass('title');
    }).mouseleave(function(){
        $(this).parent().children().first().removeClass('name');
        $(this).parent().children().last().removeClass('title');               
    }).click(function(e){
        $("#list ul li").first().trigger('mouseleave');
         $('.perm-name').removeClass('perm-name');
        $('.perm-title').removeClass('perm-title');
        $(this).parent().children().first().addClass('perm-name');
        $(this).parent().children().last().addClass('perm-title');

    }); 
    $("#list ul li").first().trigger('mouseenter');