하나의 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의 호버 이벤트에서 자바 스크립트 &의 색을 # p1로 변경하는 것입니다.

less css 또는 # p1의 색상을 변수로 설정하려면 &이 방법을 시도하지는 않았지만 # p2 : hover에서 해당 변수의 값을 변경하십시오. 하지만 CSS는 순수 CSS가 아니기 때문에 자바 스크립트도 사용합니다. 자바 스크립트 (jQuery 라이브러리를 사용하여)으로

, 당신의 코드가 될 것이다 :

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