Question

hello i have a question according css.

in my navigationbar i have 3 links. i use:

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

for that status that shows on which site the user is located.

if the user rolls over the other two links i have these:

    #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;
}

okay, the problem is that i would like to change the color from p1 when the user hovers p2. meaning something like:

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

is that possible?

thanks a lot.

the 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

This can’t be done with pure CSS.

What you can do is to use javascript & change color of #p1 on the hover event of #p2.

OR you may use less css to set color of #p1 to a variable & change the value of that variable in #p2:hover, though I have not tried this method. But again less css is not pure css, it uses javascript too.

With javascript (using jquery library), your code will be:

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