CSS

Question

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

之间的语句应该是什么

Answer 1

如果您只想拥有三个 link，每个上面有一行，并且将鼠标悬停在 link 上，则该行变为绿色

，您可以使用这样的代码

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>

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

CSS - affect <hr> element with hovering over <p> element

html

hover