在悬停的项目之前和之后更改列表项目 css

Question

我已经为我的网站创建了导航菜单。这是 html：（您还可以在 belairfinishing.com 查看侧边栏菜单，它位于左侧的菜单。）

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

基本上我希望发生的事情是，当您将鼠标悬停在其中一个项目上时，只有紧接在其之前和之后的项目会出现红色边框。因此，如果有人将鼠标悬停在咨询上，那么技术文章和贵金属回收将有红色边框。

我整个早上都在查找这个，但没有找到任何有用的东西。到目前为止，我已经尝试使用 nth-child(-n) 和 nth-child(n) 使 1 高于 1 低于 1，但我无法让它实际工作。我是在弄乱语法还是他们是解决此问题的更好方法？

感谢您的帮助！

Answer 1

使用 CSS 你只能 select 下一个元素使用相邻的兄弟元素 selector(+)，但是 CSS 没有以前的兄弟姐妹 selector.

这可以使用 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>

编辑

您也可以单独使用 CSS 使其工作。

想法是在 :hover 上向 a 添加一个 :before :伪元素，如果 a 不是第一个 [=20= 的后代] 和 :after ：伪元素，如果 a 不是最后一个 li.

的后代

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

简单来说，如果li是第一个元素，它不会在左边添加行；如果li是最后一个元素，它不会在右边添加行元素.

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>

在悬停的项目之前和之后更改列表项目 css

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

html

css

list