在 jquery 中处理多个 ID

选择你喜欢的那个

.HTML

<ul class="list_items">

为 UL 分配类 list_items

.js

$(document).ready(function(){
    $('.list_items li a').hover(
        function(){
            $(this).css('margin-left','10px');
            $(this).css('color','white');
            $(this).css('background-color','red');
        },function(){
            $(this).css('margin-left','0px'); 
            $(this).css('color','black');
            $(this).css('background-color','white');
        }
    );
});

更新的演示

更好的 js 方法

$(document).ready(function () {
    $('.list_items li a').hover(
    function () {
        var x = $(this).parent('li');
        x.css({
            'margin-left': '10px',
                'color': 'white',
                'background-color': 'red'
        });
    },
    function () {
        var x = $(this).parent('li');
        x.css({
            'margin-left': '0px',
                'color': 'black',
                'background-color': 'white'
        });
    });
});

更多更好的课程方法

演示

.js

$(document).ready(function () {
    $('.list_items li').hover(
    function () {
        $(this).addClass('active');
    },
    function () {
        $(this).removeClass('active');
    });
});

.css

.active {
    margin-left:10px;
    color:white;
    background-color:red;
}

或者只是 CSS 方法

演示

ul.list_items li:hover {
    margin-left:10px;
    color:white;
    background-color:red;
}

仅限 CSS 的解决方案：

http://jsfiddle.net/sGfxV/18/

ul {
    list-style-type: none;
}
ul li {
    margin-bottom:5px;
    width:100px;
    background-color: white;
}
ul li a {
    text-decoration:none;
    color:black;    
    margin-left: 0px;
}
ul li:hover {
    background-color: red;
}
ul li:hover a {
    margin-left: 10px;
    color: white;
}
/* transitions for fun */
ul li,
ul li a {
    -webkit-transition: all 0.3s ease;
       -moz-transition: all 0.3s ease;
            transition: all 0.3s ease;
}

为每个 id 添加一个公共字符串并捕获其上的悬停事件。例如，公共字符串是"MyLink"，下面的代码是捕获其上的事件。在代码中进行更改，如下所示：

        <li id='llist_MyLink'><a href='#' id='list'>List</a></li>
        <li id='lgroups_MyLink'><a href='#' id='groups'>Groups</a></li>
        <li id='lprofile_MyLink'><a href='#' id='profile'>Profile</a></li>
    $('[id*="MyLink"]').hover(
        function(){
            $(this).css('margin-left','10px');
            $(this).css('color','white');
            $(this).css('background-color','red');
        },function(){
            $(this).css('margin-left','0px'); 
            $(this).css('color','black');
            $(this).css('background-color','white');
        }
    );

你可以通过纯 css 轻松实现这一点（不需要 jquery 或 javascript）在这里，我提供了一个解决方案，在您的代码中进行了一些修改 检查下面的代码或检查这个小提琴http://jsfiddle.net/sarfarazdesigner/sGfxV/19/

CSS代码

ul {
list-style-type: none;
}
li {
    margin-bottom:5px;
    width:100px;
}
ul li a{
    text-decoration:none;
    color:black;
    display:block;
    padding:0 0 0 10px;
}
.menu li a:hover{ color:#fff; background:red;}

网页代码

<div style='padding:10px;border:2px solid red'>
    <ul class="menu">
        <li><a href='#' id='list'>List</a></li>
        <li><a href='#' id='groups'>Groups</a></li>
        <li><a href='#' id='profile'>Profile</a></li>
        <li><a href='#' id='invitations'>Invitations</a></li>
    </ul>
        <h5 style='color: white'>PROJECTS</h5>
    <ul class="menu">
        <li><a href='#' id='summary'>Summary</a></li>
        <li><a href='#' id='track'>Track</a></li>
        <li><a href='#' id='manage'>Manage</a></li>
        <li><a href='#' id='export'>Export</a></li>
    </ul>
        <h5 style='color: white'>ANALYSIS</h5>
    <ul class="menu">
        <li id='lanalyse'><a href='#' id='analyse'>Analyse</a></li>
        <li id='lviewall'><a href='#' id='viewall'>ViewAll</a></li>
        <li id='lexport'><a href='#' id='export'>Export</a></li>
    </ul>
        <h5 style='color: white'>SETTINGS</h5>
    <ul class="menu">
        <li><a href='#' id='users'>Users</a></li>
        <li><a href='#' id='archive'>Archive</a></li>
        <li><a href='#' id='system'>System</a></li>
        <li><a href='#' id='myprofile'>My Profile</a></li>
    </ul>
</div>