nested css style on li element on hover

Question

I have my markup something like this.

<div id="chromemenu" class="chromestyle">
  <ul>
    <li><a rel="dropmenu1" href="#" class="">Buy</a></li>
    <li><a rel="dropmenu2" href="#" class="">Sell</a></li>
    <li><a rel="dropmenu3" href="#" class="">Community</a></li>
    <li><a rel="dropmenu6" href="#" class="">Languages</a></li>
    <li><a rel="dropmenu4" href="#" class="">My Account</a></li>
  </ul>
</div>

Now I have put jQuery to add a class inside a class selected. So when user hover on alink(here on Buy link) the markup becomes like this

<div id="chromemenu" class="chromestyle">
  <ul>
    <li><a rel="dropmenu1" href="#" class="selected">Buy</a></li>
    <li><a rel="dropmenu2" href="#" class="">Sell</a></li>
    <li><a rel="dropmenu3" href="#" class="">Community</a></li>
    <li><a rel="dropmenu6" href="#" class="">Languages</a></li>
    <li><a rel="dropmenu4" href="#" class="">My Account</a></li>
  </ul>
</div>

Now I want to give style only the li whose a class is selected. My style for the li is to just give border to the li element. So can someone tell me how to do this? Any help and suggestions will be really appreciable. Thanks....

Update I want to give border to my li element not the a so please help me in that field.Can this be achieved in simple css? Hey I am still for the answer...

http://stackoverflow.com/questions/2000582/css-selector-for-foo-that-contains-bar — Ram, Mar 07 '13 at 11:07
Maybe in CSS4. :) http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector — Richard, Mar 07 '13 at 11:11
Since you're using jQuery to add the `selected` class, why not just add the class to the parent of the `a` that's being hovered over. Then you can keep your hover style in your style sheet where it belongs and not in the javascript where it's hard to find. — Gareth, Mar 07 '13 at 11:11
Put the `selected` class on the `li` instead of the `a`. Any other solution with applying CSS from jQuery will only lead to pain and suffering. (even though answers seem to lead you towards this...) — kapa, Mar 07 '13 at 11:11
CSS can handle this without jQuery using the :hover pseudo-class — David, Mar 07 '13 at 11:35

David Thomas · Answer 1 · 2013-03-07T12:48:24.750

As you're styling the parent of the element based on its descendant's class-name:

$('a.selected').closest('li').css('border-top','1px solid #000');

JS Fiddle demo.

Or, slightly better, since it removes the border (assuming this might be for mouseover/mouseout):

$('a.selected').closest('li').hover(function(){
    $(this).css('border-top','1px solid #000');
},function(){
    $(this).css('border-top-width','0');
});

JS Fiddle demo.

Plain JavaScript options for styling:

var selected = document.querySelector('a.selected');
selected.parentNode.style.borderTop = '1px solid #000';

JS Fiddle demo.

var selected = document.getElementsByClassName('selected')[0];
selected.parentNode.style.borderTop = '1px solid #000';

JS Fiddle demo.

An improved alternative, using jQuery's hover() method and addClass() rather than directly manipulating the in-line style of the element:

$('a.selected').closest('li').hover(function(){
    $(this).addClass('activeParent');
},function(){
    $(this).removeClass('activeParent');
});

And the following CSS:

li {
    /* to prevent jumping down of the li when the border is shown */
    border-top: 1px solid transparent;
}
.activeParent {
    border-top-color: #000;
}

JS Fiddle demo.

Mathew Thompson · Answer 2 · 2013-03-07T11:12:23.437

3

To give the li the border, after you call addClass, just do:

$("a.selected").parent().css("border", "1px solid #000");

Then on de-select, you could simply remove it:

$("a:not(.selected)").parent().css("border", "none");

Fiddle: http://jsfiddle.net/BMTAE/

edited Mar 07 '13 at 11:12

answered Mar 07 '13 at 11:02

Mathew Thompson

55,877
15
127
148

I want to give border li element not a ... – Mar 07 '13 at 11:04
1

@NewBie Then you can't do it. Just make the `a` 100% width/height – Andy Mar 07 '13 at 11:05
@NewBie Check my edit, you can do that in jQuery. – Mathew Thompson Mar 07 '13 at 11:06
u can. li a.selected gives the li the changes which has an a with the class selected – Max Mar 07 '13 at 11:06
right :) sorry. what about a.selected < li ? – Max Mar 07 '13 at 11:07

score 0 · Answer 3 · answered Mar 07 '13 at 11:41

I realize that this is probably not the answer you want, but I'm going to give it anyway.

You are already using jQuery to add the selected class to your a tag; probably using something like:

$('a').hover(
    function(){
        $(this).addClass('selected');
    },
    function(){
        $(this).removeClass('selected');
    }
);

If you change this to:

$('a').hover(
    function(){
        $(this).parent().addClass('selected');
    },
    function(){
        $(this).parent().removeClass('selected');
    }
);

you will add the class to the parent li and can then use

li {border: 1px solid black;}

or

.chromestyle li {border: 1px solid black;}

to style your li.

The main benefit of doing it this way is that you keep your CSS altogether in the stylesheet(s) so future maintainers of your code will be able to find it easily instead of rumaging around in your javascript files looking for the hover event handler.

Adding the parent() may slow things down slightly, but any other solution is going to need to use jQuery to add CSS to the parent anyway so overall there should be a speed increase since the CSS stuff will be handled by the browser and not the javascript.

nested css style on li element on hover

3 Answers3