Dealing with multiple IDs in jquery

Question

I have multiple links and I want to have same hover effect on all the links, is there any simple way to do it. I wrote Javascript for one ID, but I don't want to write for all links. When hovered, the link text should change to white and background color should change to red.

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

    );

});

NOTE: Here I gave 'a' tag, may be it will become easy with a: hover, a: link etc. Also write the answer keeping in mind such that, it will be applicable to all.

Short answer : Dont work like that. use class instead. id should be unique. — Royi Namir
– Royi Namir, Commented Sep 12, 2013 at 9:48
You can use class to select multiple elements or simply use element tag as selector — Robin C Samuel
– Robin C Samuel, Commented Sep 12, 2013 at 9:48
Why didn't you use CSS :hover? I understand this question is tagged with javascript and jquery but still CSS will be the obvious choice since you also mention 'same hover effect on all links'. — JofryHS
– JofryHS, Commented Sep 12, 2013 at 9:53
I want to know the answer, if they are not links also. see my NOTE — Lonely
– Lonely, Commented Sep 12, 2013 at 9:55
In that case use a class like '.pretty-hover', which along with '.pretty-hover:hover' can achieve what you need. Then you can apply this class to anything. — JofryHS
– JofryHS, Commented Sep 12, 2013 at 9:57

Tushar Gupta - curioustushar · Accepted Answer · 2013-09-12 14:27:58Z

Choose the one you like

HTML

<ul class="list_items">

assign ul with class 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

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

More Better Approach with classes

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

Or Just CSS approach

DEMO

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

Instead of $(this).css('background-color','white'); you should use $(this).parent().css('background-color','white'); because in his code $('#llist') is referred to the li
my background-color is applied to 'li' tag not 'a' tag. see my Fiddle once
Nice answer, but I would be tempted to ask you why you didn't suggest a css approach: .list_items li a { ... } and .list_items li a:hover { ... } could do the trick without any Javascript.

biziclop · Accepted Answer · 2013-09-12 10:00:40Z

CSS-only solution:

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

Prashant · Accepted Answer · 2013-09-12 10:03:46Z

Add a common string to each id and capture hover event on it. For example the common string is 'MyLink' and below code is to capture event on it. Make the changes in code as follows:

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

        }

    );

The Mechanic · Accepted Answer · 2013-09-12 10:04:19Z

You can easily achieve this by pure css (don't need jquery or javascript) here i've provide a solution with some modification in your code check below code or check this fiddle http://jsfiddle.net/sarfarazdesigner/sGfxV/19/

CSS Code

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 Code

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

you should check code i've applied padding instead of margin @Lonely
But it is not applying when hovering, the hovered element should come right by 10px
@Lonely in my fiddle is working fine. and you are free to adjust css code according to you

Collectives™ on Stack Overflow

Dealing with multiple IDs in jquery

4 Answers 4

3 Comments

Comments

Comments

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

4 Comments

Related