호버상의 상위 요소의 배경색 변경

Question

아래는 내 html 코드입니다.

 <div class="container"> 
      <a class="link1" href="">Link1</a> 
      <a class="link2" href="">Link2</a> 
      <a class="link3" href="">Link3</a>    
     </div> 

내가 링크 1 또는 Link2부터에 마우스를 가져 가면 container의 background-color 변화를 얻을 수 있다는 CSS의 셀렉터가있다. 내가 새로운 사람인 이래로 & 자기 자신이 약간의 문제를 안고 있다고 생각했다.

Answer 1

짧은 답변은 아니요입니다. 부모를 선택하거나 오름차순으로 선택할 수있는 방법이 없습니다.

가장 좋은 방법은 HTML을 변경하고 다른 요소를 사용하여 부모의 배경을 가짜로 만드는 것입니다.

HTML

<div class="container"> 
     <a class="link1" href="">Link1</a> 
     <a class="link2" href="">Link2</a> 
     <a class="link3" href="">Link3</a> 
     <div class="fake"></div> 
</div> 

CSS

.fake { 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    background:yellow; 
} 
.link1, .link2, .link3 { 
    position:relative; 
    z-index:1; 
} 
.link1:hover ~ .fake { 
    background:#CCC; 
} 
.link2:hover ~ .fake { 
    background:brown; 
} 
.link3:hover ~ .fake { 
    background:orange; 
} 

확인 ~ 선택에 대해 http://jsfiddle.net/g7brnb9q/

이 형제 eleme을 선택하는 데 도움이 데모 :이처럼

nts,이 경우 링크 뒤에 fake 클래스가있는 요소.

은 첵이 GO HERE

Answer 2

CSS4에 대해 여기서 더 (응) 엔진 또는 브라우저 (9 월 2014) 그러나이 현재 어떤 현재 지원하지 않는 :has() 사이비 클래스 (http://dev.w3.org/csswg/selectors4/#relational)를 소개합니다. 이 지원 된 경우

, 다음 (현재 제안) 구문은 다음과 같습니다

div.container:has(a.link1:hover) { background-image("link1.png"); } 
div.container:has(a.link2:hover) { background-image("link2.png"); } 
div.container:has(a.link3:hover) { background-image("link3.png"); } 

그때까지 당신은 jQuery의 유사한 has (http://api.jquery.com/has/)와 같은 자바 스크립트에 의존해야합니다. CSS에 대한 부모의 선택이 없습니다

Answer 3

...

당신이 자바 스크립트 접근 방식을 가지고 들어, 같은 것을 할 수 괜찮아요 경우

:

document.getElementsByClassName("link1")[0].onmouseover = function() { 
    this.parentNode.backgroundColor = "red"; 
}; 
document.getElementsByClassName("link2")[0].onmouseover = function() { 
    this.parentNode.backgroundColor = "green"; 
}; 
document.getElementsByClassName("link3")[0].onmouseover = function() { 
    this.parentNode.backgroundColor = "blue"; 
};