CODEWITHSUNDEEP
jquerycsshover
user1761977
user1761977

Reputation:

Get all not hovered elements and do something with them

My problem is probably quite simple, but somehow I can’t get it fixed. In a group of objects with one object hovered over, I’d like the hovered object to remain unchanged, but all others are supposed to change.

To be more specific: I have an unordered list of menu-items. Whenever I hover over one of them, all the other items are supposed to become smaller. When I "unhover" the item they should change back again.

I found this post, but it’s answers didn’t work for me: Set style for not not hovered elements only

This is what I tried so far:

/*This is the default size*/
#navigation ul li a
{
    font-size: 14px;    
}
/*When the list is hovered, change font-size (does’nt work)*/
#navigation ul:hover
{
    font-size: 13px;    
}
/*When the a menu-item is hovered change it’s font-size back to default*/
#navigation ul li a:hover
{
    font-size: 14px;    
}

This is one of the answers I found in the post I mentioned. It would be great if it could be done that simply with plain CSS. But it’s not working. Did I do something wrong?

I also tried something with jQuery, although I’m not an expert.

for(var i=1; i <= anzahlNavipunkte; i++)
{
    var naviId = "navi" + i; // id name for every menu-item
    var currentMenuItem = "#navigation li:nth-child(" + i + ") a"; 

    $(currentMenuItem).attr('id', naviId); // gives the current menu-item a specific id

    $('#navigation li a').hover(function()
    {   
        var hoveredId = $(this).attr("id"); // get the id of of the hovered element

        $('#' + hoveredId).hover(function()
        {   
            console.log(hoveredId);
            $('#' + hoveredId).css('font-size', '14px'); // hovered element gets default font-size
            $('#navigation ul').css('font-size', '13px'); // other elements change to 13px
        }, function()
        {
            $('#navigation ul').css('font-size', '14px'); // other elements change back
        })
    });
};

It doesn’t work, either. Probably because it’s the same approach as with the plain CSS-solution. Can anybody help me out?

I hope my explanation is understandable. If there are questions left please ask.

Upvotes: 3

Views: 130

Answers (3)

Alexander Taran
Alexander Taran

Reputation: 6725

Because of specificity #navigation ul li overrides #navigation ul:hover that's why your ruleset does not work.
Add 'a' in your list:hover rule and you should be fine 

#navigation ul:hover a
{
   font-size: 13px;    
}

http://jsfiddle.net/DRJCg/

Upvotes: 0

Louis Loudog Trottier
Louis Loudog Trottier

Reputation: 487

insted of #navigation ul, i think it sould be #navigation ul li

a more direct way would be to add a class to your li and point to the class instead.

i youd use a function li so:

function reduceOtherLi(li_to_keep_big){
 var eList = $('#navigation ul li')`//put all the li in an array
    // for each li in the array
    for (i=0; i<eList.length; i++){
        var e = eList[i]; //get current li

        //if it not the clicked one, make the size smalle
        if (e != li_to_keep_big) $(e).css({'font-size':'13px'}); 
        else $(e).css({'font-size':'14px'});
    }
}

then you can use the mouseover handler to trigger the function

$("#navigation ul li").mouseover(function() { reduceOtherLi(this);});

to reset them simply add the folowing line:

$("#navigation ul li").mouseout(function() { $('#navigation ul li').css({'font-size':'14px'});});

Basicly you can just putt al this in a tag an it sould work like you want.

Notice the .css(), you could easily use .addClass() and .removeClass() instead and specify the font-size (and bunh of other css) in there.

As for the event handler, the 'this' will repesent the hoverred element. and be passe as the li_to_keep_big.

hope this helps.

Upvotes: 0

kspacja
kspacja

Reputation: 4874

HTML:

<div id="container" >
   <div id="children">
   </div>
</div>

CSS:

#container:HOVER #children {
    /* your style */
}

Try this...

Upvotes: 2

Related Questions