Question

我有多个链接，我希望在所有链接上都有相同的悬停效果，有什么简单的方法可以做到这一点。我为一个ID编写了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：hover，a：link等。同时写下答案，记住这样，它将适用于所有人。

Answer 1

选择您喜欢的

<强> HTML

<ul class="list_items">

使用类list_items

指定ul

<强> 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;
}

Answer 2

仅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;
}

Answer 3

为每个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');

        }

    );

Answer 4

你可以通过纯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;}

HTML代码

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

在jquery中处理多个ID

4 个答案: