CSS - 将鼠标悬停在 <p> 元素上影响 <hr> 元素答案

【问题标题】：CSS - affect <hr> element with hovering over <p> elementCSS - 将鼠标悬停在 <p> 元素上影响 <hr> 元素
【发布时间】：2022-02-15 07:06:39
【问题描述】：

.about:hover > .left {
  color: #DAFDBA;
}

HTML: >
<div class="navbar">
  <!--Lines above Links-->

  <hr class="left">
  <hr class="middle">
  <hr class="right">

  <!--Links (Text)-->
  <p class="about"><a href="about">About.</a></p>
  <p class="projects"><a href="projects">Projects.</a></p>
  <p class="contact"><a href="contact">Contact.</a></p>

</div>

.about:hover和.left?之间的语句应该是什么

【问题讨论】：

> 选择器是选择一个元素的直接子元素。 .left 不是.about 的直系子代，.about:hover 也很可能不起作用。 .about a:hover 会起作用。但是这使得无法选择<hr>
嗨@jan_lampert，基本上你不能用普通的css做你想做的事。您不能影响悬停在该元素或其祖先之外的其他元素的元素。
@salvo 我可以换个位置吗？
@jan_lampert 你得用一些javascript，你要我提供一个jQuery解决方案吗？

标签： html css hover

【解决方案1】：

如果您只想拥有三个链接，每个链接上方各有一行，并且将鼠标悬停在链接上，则可以使用这样的代码

a{
  color:inherit;
  text-decoration: none;
  border-top: 2px solid #000;
  padding:.2em 0 0;
  margin: 0 .2em;
}
a:hover {
  border-color: #DAFDBA;
}

<nav>
  <a href="about">About</a> 
  <a href="projects">Projects</a> 
  <a href="contact">Contact</a>
</nav>

【讨论】：

只是为了改善语义：应该使用语义标签<nav>，而不是<div class="navbar>"。