CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Phorden
Phorden

Reputation: 1034

jQuery - Remove border from preceding sibling element

I am trying to remove the border-bottom on the sibling above the element that is hovered over on the menu. I do not know if I am using the wrong function or if it is some other issue. Thanks for any feedback.

jQuery:

jQuery(document).ready(function(){
  $('#nav_1487666 li a').mouseover(function(){
      $(this).prev().css("border-bottom", "none");
  });
});

HTML:

<ul id="nav_1487666">
    <li><a href="/index">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Landscaping</a></li>
    <li><a href="#">Irrigation</a></li>
    <li><a href="#">Porous Pave</a></li>
    <li><a href="#">Demo Dumpsters</a></li>
    <li><a href="#">Other Services</a></li>
    <li><a href="#" onclick="return false;">Lawn Care</a></li>
    <li><a href="#" onclick="return false;">Contact</a></li>
</ul>

Upvotes: 0

Views: 553

Answers (2)

Amit Garg
Amit Garg

Reputation: 3907

Change 

$(this).prev().css("border-bottom", "none");

To 

$(this).parent().prev().css("border-bottom", "none");// To remove border from li

or 

$(this).parent().prev().find('a').css("border-bottom", "none");// To remove border from a

Upvotes: 3

Abhishek Prakash
Abhishek Prakash

Reputation: 964

Assuming the border is on the li, something like this - 

#nav_1487666 li{
border: 1px solid red;
margin: 5px;
}

then change your jquery selector to

$('#nav_1487666 li').mouseover(function(){
  $(this).prev().css("border-bottom", "none");
});

Check the fiddle

Upvotes: 0

Related Questions