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


Tags: javascript,jquery,html,css

Problem :

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?



Solution :

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


    CSS Howto..

    Basic Accordion pull down using java script and css not working. How can I get it to not have a symbol beside it?

    Parsing awful HTML: How do I recognize boundaries with xpath?

    iOS not showing element on right: 0/float: right

    CSS How to generate this Shape on a Div or on Canvas

    How to make attractive dropdown menu using css3? [closed]

    How to make comment shape using css

    How to ignore parent css style

    How can I align a div right under another?

    How to make Bootstrap container auto for height?

    how to select a sibling element when hovering in CSS?

    How to control tr height of table in CSS

    How can I wrap a page with a centered DIV?

    How to add fade in and fade out when changing between texts in javascript

    How can I create alike css classes [duplicate]

    HTML/CSS: How to center floating divs?

    Show only small portion of an image [closed]

    How to edit a pseudo element on focus using css or jQuery

    How to transform Ruby hash to CSS rule?

    How to get CSS background property to work with toggleClass() in jQuery?

    Show child elements into parent by changing its class through jquery

    How to resize an image in pure HTML/CSS while keeping its proportions?

    How do I draw a Diagonal div?

    How to make the Div fixed at a particular scroll location?

    How to give the background-image path in CSS?

    How to fix this css float problem?

    How to prevent outside CSS from adding and overriding ReactJS component styles

    How to align an img and a carousel next to each other, with max-width of 1000px?

    How to apply CSS styling to dynamically generated list (within mCustomScrollbar container)?

    How to read inline styling of an element?

    CSS - How to make a 100% height div not overlap it's contents when window is resized