两个条件合一，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无法实现的。

您可以使用javascript&在#p2的悬停事件上改变#p1的颜色。

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

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

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