CODEWITHSUNDEEP
javascriptjquery
Lonely
Lonely

Reputation: 613

Dealing with multiple IDs in jquery

My JSFiddle

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.

Upvotes: 0

Views: 75

Answers (4)

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57095

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

Upvotes: 2

The Mechanic
The Mechanic

Reputation: 2329

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>

Upvotes: 0

Prashant
Prashant

Reputation: 702

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

        }

    );

Upvotes: 0

biziclop
biziclop

Reputation: 14596

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

Upvotes: 0

Related Questions