1

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...

Improve this question
5
  • stackoverflow.com/questions/2000582/… Commented Mar 7, 2013 at 11:07
  • Maybe in CSS4. :) stackoverflow.com/questions/1014861/… Commented Mar 7, 2013 at 11:11
  • 2
    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. Commented Mar 7, 2013 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...) Commented Mar 7, 2013 at 11:11
  • CSS can handle this without jQuery using the :hover pseudo-class Commented Mar 7, 2013 at 11:35

3 Answers 3

Reset to default
4

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

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/

Improve this answer

5 Comments

I want to give border li element not a ...
@NewBie Then you can't do it. Just make the a 100% width/height
@NewBie Check my edit, you can do that in jQuery.
u can. li a.selected gives the li the changes which has an a with the class selected
right :) sorry. what about a.selected < li ?
0

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.

Improve this answer

Comments