CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Boudi AlSayed
Boudi AlSayed

Reputation: 45

How to Change CSS style of the same element that is NOT Hovered

HTML

<ul id="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">Categories</a>
            <ul>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
            </ul>
        </li>
        <li><a href="#">Work</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>

CSS

#menu li{
    width:80px;
}
#menu li:hover {
    width:200px;
}

I want to set the width of OTHER <li>s THAT ARE NOT HOVERED to 60PX while one of them are Hovered, and then set width back to 80PX when all of them are not hovered.. how Would I do that?

Upvotes: 0

Views: 94

Answers (4)

Aaks20
Aaks20

Reputation: 401

You can achieve that by simply using :hover on both li and ul.

    ul li{
       width:80px;
    }

    ul:hover li{
       width: 60px;
    }

    #menu li:hover {
       width:200px;
    }

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388446

Using jQuery

jQuery(function ($) {
    $('#menu li').hover(function () {
        $(this).width(200).siblings().width(60)
    }, function () {
        $(this).siblings().addBack().width(80)
    })
})

Demo: Fiddle

Upvotes: 3

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85653

I want to set the width of OTHER <li>s THAT ARE NOT HOVERED to 60PX while one of them are Hovered, and then set width back to 80PX when all of them are not hovered

With jquery you can do like this:

$('#menu li').hover(function(){
    $('#menu li').css('width','60px');
    $(this).css('width','80px');
},function(){
   $('#menu li').css('width','80px');
});

demo

Upvotes: 2

Femi
Femi

Reputation: 1322

To select li elements that are not :hovered, consider trying:

#menu li{
    width:80px;
    color: green;
}
#menu:hover li{
    color: yellow;
}
#menu li:hover {
    width:200px;
    color: red;
}

Upvotes: 0

Related Questions