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不是第一个a的后代，那么我们的想法是在:hover上向a添加li：伪元素: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

1 个答案: