javascript - jquery中处理多个ID

Question

我的JSFiddle

我有多个链接，我想对所有链接具有相同的悬停效果，有没有简单的方法可以做到这一点。我为一个ID编写了Javascript，但我不想为所有链接编写Javascript。 悬停时，链接文本应更改为白色，背景颜色应更改为红色。

CSS

ul {
list-style-type: none;
}
li {
    margin-bottom:5px;
    width:100px;

}
ul li a{
    text-decoration:none;
    color:black;    
}

HTML

<div style='padding:10px;border:2px solid red'>
<ul>
            <li id='llist'><a href='#' id='list'>List</a></li>
            <li id='lgroups'><a href='#' id='groups'>Groups</a></li>
            <li id='lprofile'><a href='#' id='profile'>Profile</a></li>
            <li id='linvitations'><a href='#' id='invitations'>Invitations</a></li>
        </ul>
        <h5 style='color: white'>PROJECTS</h5>
        <ul>
            <li id='lsummary'><a href='#' id='summary'>Summary</a></li>
            <li id='ltrack'><a href='#' id='track'>Track</a></li>
            <li id='lmanage'><a href='#' id='manage'>Manage</a></li>
            <li id='lexport'><a href='#' id='export'>Export</a></li>
        </ul>
        <h5 style='color: white'>ANALYSIS</h5>
        <ul>
            <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>
            <li id='lusers'><a href='#' id='users'>Users</a></li>
            <li id='larchive'><a href='#' id='archive'>Archive</a></li>
            <li id='lsystem'><a href='#' id='system'>System</a></li>
            <li id='lmyprofile'><a href='#' id='myprofile'>My Profile</a></li>
        </ul>
</div>

JS

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

    );

});

注意: 在这里我给出了“a”标签，也许使用 a:悬停、a:链接等会变得很容易。还要牢记答案，这样它将适用于所有人。

Answer 1

选择你喜欢的

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');
        }
    );
});

Updated DEMO

更好的 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'
        });
    });
});

更好的类方法

DEMO

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方法

DEMO

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