Change css of list item before an after the item that is being hovered over

Question

I've created navigation menu for my website. Here's the html: (you can also view the sidebar menu at belairfinishing.com, its the menu on the left.)

<div><img src="../public/images/skystatic.jpg" id="LinkForBannerImage"></div>
    <ul>
        <li><a href="../public/Vibratory Process Examples.htm">Proccess Technology</a></li>
        <li><a href="../public/Mass_Finishing_Equipment_001.htm">Equipment</a></li>
        <li><a href="../public/Mass_Finishing_Media_Compounds_001.htm">Media &amp; Compounds</a></li>
        <li><a href="../public/Cleaners and Dryers.htm">Parts Cleaners &amp; Dryers</a></li>
        <li><a href="../public/Waste_Water_Treatment_Sollutions_001.htm">Waste Water Treatment</a></li>
        <li><a href="../public/Precious Metal Recovery.htm">Precious Metal Recovery</a></li>
        <li><a href="../public/Mass_Finishing_Consulting_001.htm">Consulting</a></li>
        <li><a href="../public/Mass_Finishing_Technical_Articles_001.htm">Technical Articles</a></li>
        <li><a href="../public/Press_Release.htm">Press Releases</a></li>
        <li><a href="http://www.toolhoning.com">Toolhoning.com</a></li>
        <li><a href="../public/portal/index.html">Distributor Log In</a> </li>
    </ul>
</div>

Basically what I would like to happen is that when you hover over one of the items, ONLY the items directly before an after that get a red border. So if someone were to hover over Consulting, then Technical Articles and Precious Metal Recovery will have red borders.

I've been looking this up all morning and haven't found anything that works. So far I've tried to use nth-child(-n) and nth-child(n) to get 1 above an 1 below but I can't get that to actually work. Am I messing up the syntax or is their a better solution for this problem?

Thanks for the help!

The one below could be done with `li:hover + li`. However, the problem is that there is [no CSS previous sibling selector](http://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-selector). — JCOC611, Jan 23 '15 at 15:49
You could use jQuery if it is available to you. If you can you can target the hovered `li` and use `.next('li')` and `.prev('li')` and then apply your style during the hover and remove it on the release. — Wild Beard, Jan 23 '15 at 16:11
@Press I'm unable to use jQuery for this problem. I'm limited to html and css only. — Timothy McGee, Jan 23 '15 at 16:20
@JCOC611 Using li:hover + li method worked and allowed me to create a red border around the next li but this li still had the same white border that it normally does on top of the red border. Any idea why it still using the non-hover css when its being hovered over? — Timothy McGee, Jan 23 '15 at 16:21
@TimothyMcGee - I'm still working on making it work with html and css alone. So, check back, I might update my answer. :) — Weafs.py, Jan 23 '15 at 16:28
If you figure out a way to use html an css alone let me know! I was able to get the jQuery to work but html an css alone would be a much better solution for my website. Thanks for the help so far though! :) — Timothy McGee, Jan 23 '15 at 16:31
@TimothyMcGee - Yes, I think it is possible using :pseudo-elements. — Weafs.py, Jan 23 '15 at 16:32

Weafs.py · Accepted Answer · 2015-01-23T17:08:03.507

Using CSS you could only select the next element using the adjacent sibling selector(+), however CSS doesn't have a previous sibling selector.

This could be achieve using jQuery.

$('li').hover(
  function() {
    $(this).next().find('a').addClass('highlight');
    $(this).prev().find('a').addClass('highlight');
  },
  function() {
    $(this).next().find('a').removeClass('highlight');
    $(this).prev().find('a').removeClass('highlight')
  })

#cssmenu {
  text-align: center;
}
ul {
  padding: 0;
  list-style: none;
  white-space: nowrap;
}
li {
  display: inline-block;
  vertical-align: top;
}
a {
  display: block;
  text-decoration: none;
  width: 130px;
  height: 50px;
  line-height: 50px;
  color: white;
  background: #222;
  box-sizing: border-box;
}
a:hover {
  color: rosybrown;
}
.highlight {
  border-bottom: 4px solid rosybrown;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cssmenu">
  <ul>
    <li class="active"><a href="../public/index.htm">Home</a></li
    ><li><a href="../public/About_Bel_Air_Mass_Finishing.htm">About Us</a></li
    ><li><a href="../public/ContactForm.htm">Contact Us</a></li
    ><li><a href="../public/Bel_Air_Trade_Shows_Seminars.htm">Trade Shows</a></li
    ><li><a href="../public/Vibratory_Finishing_Workshop.htm">Vibratory Workshops</a></li
    ><li class="last"><a href="../public/Bel_Air_Directions_Facility.htm">Directions</a></li>
  </ul>
</div>

Edit

You could also make it work using CSS alone.

The idea is to add a :before :pseudo-element to a on :hover, if the a is not a descendant of first li and :after :pseudo-element, if the a is not a descendant of the last li.

i.e, li:not(:first-child) a:hover:before, li:not(:last-child) a:hover:after.

In simple words, it won't add the line on the left if the li is the first element and won't add the line on the right if the li is the last element.

body {
  margin: 0;
}
#cssmenu {
  text-align: center;
  margin: 0;
}
ul {
  padding: 0;
  margin: 0;
  list-style: none;
  white-space: nowrap;
}
li {
  display: inline-block;
  vertical-align: top;
}
a {
  position: relative;
  display: block;
  text-decoration: none;
  width: 130px;
  height: 50px;
  line-height: 50px;
  color: white;
  background: #222;
  box-sizing: border-box;
}
a:hover {
  color: rosybrown;
}
li:not(:first-child) a:hover:before, li:not(:last-child) a:hover:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 4px;
  left: -100%;
  bottom: 0;
  border-bottom: 4px solid rosybrown;
  box-sizing: border-box;
}
li:not(:last-child) a:hover:after {
  left: 100%;
  z-index: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cssmenu">
  <ul>
    <li class="active"><a href="../public/index.htm">Home</a></li
    ><li><a href="../public/About_Bel_Air_Mass_Finishing.htm">About Us</a></li
    ><li><a href="../public/ContactForm.htm">Contact Us</a></li
    ><li><a href="../public/Bel_Air_Trade_Shows_Seminars.htm">Trade Shows</a></li
    ><li><a href="../public/Vibratory_Finishing_Workshop.htm">Vibratory Workshops</a></li
    ><li class="last"><a href="../public/Bel_Air_Directions_Facility.htm">Directions</a></li>
  </ul>
</div>

Change css of list item before an after the item that is being hovered over

1 Answers1