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＆amp;在＃p2。

的悬停事件中更改＃p1的颜色

或者您可以使用less css将＃p1的颜色设置为变量＆amp;在＃p2：hover中更改该变量的值，虽然我没有尝试过这种方法。 但再次减少css不是纯粹的CSS，它也使用javascript。

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

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

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

1 个答案: