在正在盘旋的项之后更改列表项的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以下的值，但我无法让它真正发挥作用。我是搞砸了语法，还是他们更好地解决了这个问题？

谢谢你的帮助！

Answer 1

使用CSS，您只能使用相邻的同级选择器(+)选择下一个元素，但是CSS没有以前的同级选择器。

这可以使用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使其工作。

如果:before不是第一个li的后代，而:after：伪元素不是最后一个li的后代，则向:hover上的a添加一个:hover：伪元素。

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

​