CODEWITHSUNDEEP
jqueryclasshtml-listsstyling
rod
rod

Reputation: 309

jQuery mouseover + mouseout + click to change multiple (2) <li> css classes / styling

I have a list of <ul> containing 2 <li> like this:

HTML:

<div id="list">
    <ul>
        <li>name1</li>
        <li>title1</li>
    </ul>

    <ul>        
        <li>name2</li>
        <li>title2</li>
    </ul>

    <ul>
        <li>name3</li>
        <li>title3</li>
    </ul>

    <ul>        
        <li>name4</li>
        <li>title4</li>
    </ul>
and so on...
</div>

CSS:

#list {color: grey}
.name {color: black}
.title {color: red}

Output looks like this (text is all grey):

name1 title1
name2 title2
name3 title3
name4 title4

When you mouseover any of the <ul>, each of its <li> gets a class applied to look like this (italics are the .name class, bold is the .title class):

name1 title1
name2 title2
name3 title3 <~the mouseover
name4 title4

When you mouseout, it goes back.

Additionally, when you click on one of the <ul> it will stay in the styling of the mouseover state and trigger an <a href="something">

And, finally, when the page is first loaded, the first <ul> has to be the selected one like this:

name1 title1
name2 title2
name3 title3
name4 title4

I have been able to accomplish just one of the functions, say click, but not all 3. I'm new to jQuery, so multiple functions like this send my brain into a spin.

I would be grateful with any help putting me in the right direction.

Upvotes: 0

Views: 1743

Answers (2)

rod
rod

Reputation: 309

Thanks for all of your help Niklas.
The first <ul> remained in the "mouseover" state, so I modified the code to look like this and it all works! I couldn't have done it without you. 

$(function(){
    $("#list ul li").mouseenter(function(){
        $(this).parent().children().first().addClass('name');
        $(this).parent().children().last().addClass('title');
    }).mouseleave(function(){
        $(this).parent().children().first().removeClass('name');
        $(this).parent().children().last().removeClass('title');               
    }).click(function(e){
        $("#list ul li").first().trigger('mouseleave');
         $('.perm-name').removeClass('perm-name');
        $('.perm-title').removeClass('perm-title');
        $(this).parent().children().first().addClass('perm-name');
        $(this).parent().children().last().addClass('perm-title');

    }); 
    $("#list ul li").first().trigger('mouseenter');

Upvotes: 1

Niklas
Niklas

Reputation: 30002

The following should do it. Might need to make small adjustments if you intend to add <a> tags in there, but with the provided HTML structure this should accomplish what you are looking for.

$(function(){
    $("#list ul li").hover(function(){
        $(this).parent().children().first().addClass('name');
        $(this).parent().children().last().addClass('title');
    },function(){
        $(this).parent().children().first().removeClass('name');
        $(this).parent().children().last().removeClass('title');               
    }).click(function(e){

        $(this).parent().children().first().addClass('perm-name');
        $(this).parent().children().last().addClass('perm-title');
    }); 
    $("#list ul li").first().trigger('mouseover');

});

and the CSS:

#list {color: grey}
.name,.perm-name {color: black}
.title,.perm-title {color: red}

Working example.

Upvotes: 2

Related Questions