two conditions in one with css possible? - html

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');
});