html - 两个条件合二为一，css可能吗？

Question

你好我有一个根据css的问题。

在我的导航栏中，我有 3 个链接。我用：

    #p1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 45px;
    font-weight: bolder;
    color: #999999;
    text-decoration: none;
}

对于显示用户所在站点的状态。

如果用户滚动其他两个链接，我有这些：

    #p2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 45px;
    font-weight: bolder;
    color: #ECECEC;
    text-decoration: none;
}
#p2:hover {
    font-weight: bolder;
    color: #999999;
    cursor:default;
}
#p2:active {
    font-weight: lighter;
    color: #999999;
}

好的，问题是我想在用户悬停 p2 时从 p1 更改颜色。意思是：

 #p2:hover {
    font-weight: bolder;
    color: #999999;
    cursor:default;
        #p1 {
        color: #f23;
        }
 }

那可能吗？

多谢。

的HTML：

 <div id="nav">
      <div id="link"><p1>link1</p1></div>
      <div id="link"><p2>link2</p2></div>
      <div id="link"><p2>link3</p2></div>
      <div id="link"><div id="login"></div></div>
    </div>

Answer 1

纯 CSS 无法做到这一点。

您可以做的是在#p2 的悬停事件上使用javascript 并更改#p1 的颜色。

或者您可以使用较少的 css将 #p1 的颜色设置为变量并更改 #p2:hover 中该变量的值，尽管我没有尝试过这种方法。但同样 less css 不是纯 css，它也使用 javascript。

使用 javascript（使用 jquery 库），您的代码将是：

$("#p2").hover(function() {
  $("#p1").css('color', '#f23');
});