한 div에 마우스를 올려 놓으면 다른 div의 배경 위치에 영향을받습니다.

Question

div의 스택을 서로 위에 놓으면 position : absolute로 설정되며 모두 컨테이너 div에 포함됩니다. 내가 뭘하고 싶은지 사용자가 # feature_1_hitbox를 가리키면 # feature_1_shade의 배경 위치가 변경됩니다. 나는 이것을 사용하여 이것을 달성하려고 노력했다. -

#feature_1_hitbox:hover #feature_1_shade { 
background-position: 0 0; 
} 

이것은 작동하지 않는다. 내가 같은 컨테이너 사업부에 적용 할 경우, 그것은 작동합니까 :

#feature_1_container:hover #feature_1_shade { 
background-position: 0 0; 
} 

나는 거의이 정착 것,하지만 그래서, 특정 크기가되도록 hitbox에서 필요 : 호버가 적용되어야 내 hitbox div. 하나의 div가 아닌 다른 div가 작동하는 이유가 있습니까? 여기

<!-- container --> <div id="feature_1_container"> 
<!-- shade --> <div id="feature_1_shade"></div> 
<!-- text and arrow --> <div id="feature_1_text_container"><h3 id="feature_1_arrow">Memberships</h3><p id="feature_1_text">Text here text here</p></div> 
<!-- image --> <div id="feature_1_graphic"></div> 
<!-- hitbox --> <a href="#"><div id="feature_1_hitbox"></div></a> 

</div> <!-- #feature_1_container --> 

를 CSS의 :

다음은 마크 업 코드의

순서대로 HTML 소스 코드와

#feature_1_container { 
width: 289px; 
height: 255px; 
float: left; 
} 

#feature_1_hitbox { 
width: 289px; 
height: 166px; 
margin: 89px 0 0 0; 
position: absolute; 
/* background-color: #F99; */ 
} 

#feature_1_graphic { 
width: 289px; 
height: 255px; 
position: absolute; 
background-image: url(site_style_images/feature_1_memberships_bag.png); 
} 

#feature_1_text_container { 
width: 289px; 
margin: 100px 0 0 0; 
position: absolute; 
} 

#feature_1_text { 
margin: 0 0 0 100px; 
} 

#feature_1_arrow { 
background-image: url(site_style_images/feature_arrows.png); 
background-position: center right; 
background-repeat: no-repeat; 
height: 49px; 
padding: 0 30px 0 100px; 
margin: 0 22px 0 0; 
color: #8d895c; 
font-size: 22px; 
line-height: 44px; 
font-family: 'Quicksand', sans-serif; 
font-weight: normal; 
letter-spacing: -2px; 
font-style: normal; 
} 

#feature_1_shade { 
width: 289px; 
height: 166px; 
margin: 89px 0 0 0; 
background-image: url(site_style_images/feature_1_shade.png); 
background-position: 0 -166px; 
position: absolute; 
background-color: #CCC; 
} 

#feature_1_hitbox:hover #feature_1_shade { 
background-position: 0 0; 
} 

Answer 1

, 자바 스크립트 또는 jQuery를 사용해야합니다. CSS 선택기는 이전 요소를 거꾸로 참조 할 수 없습니다.

소스 순서가 역전 된 경우, 당신이 뭔가를 할 수 있습니다

#feature_1_hitbox:hover ~ a #feature_1_shade 

jQuery를가 옵션 인 경우, 추가하고 #feature_1_hitbox의 호브의 상태에 따라 에 클래스를 제거 할 수 있습니다 :

CSS

#feature_1_shade.on {...} 

jQuery를

$("#feature_1_hitbox").hover(
    function(){ $('#feature_1_shade').addClass('on'); }, 
    function(){ $('#feature_1_shade').removeClass('on'); } 
); 

자바 스크립트 것과 동일합니다 :

var obj = document.getElementById("feature_1_hitbox"); 
obj.onmouseover = function(){ 
    document.getElementById("feature_1_shade").className = "on"; 
} 
obj.onmouseout = function(){ 
    document.getElementById("feature_1_shade").className = ""; 
} 

참고 : 다른 클래스를 사용하는 경우, 추가 또는 일반 자바 스크립트 클래스를 제거 할 때주의해야합니다.

Answer 2

CSS 선택기의 경우 #container : hover #shade {}가 실제로 ID # 컨테이너의 ID 스타일을 지정하기 때문에 작동하지 않는 이유가 있습니다. 마크 업 코드에서 #shade는 #container에 중첩되어 있지만 #hitbox에는 중첩되어 있지 않습니다. 아마도 hitbox와 크기와 위치가 동일하고 보이지 않는 div 안에 음영이 포함 된 다른 "보이지 않는 div"(불투명도 : 0)를 추가 한 다음 보이지 않는 div를 가리키는 셀렉션 선택기로 스타일을 지정할 수 있습니다. 예 : #invisible_hitbox_hover : 마우스 오버 # shade {}