HTML/CSS : a : 호버가 다른 div를 변경하지 않는 것 같습니까?

나는 정말 어리석은 실수를 잘 알고 있었지만 이것이 작동하지 않는 이유를 알 수 없었다.HTML/CSS : a : 호버가 다른 div를 변경하지 않는 것 같습니까?

내 HTML은 단순한 메뉴이고, "집"또는 "재생"을 가리키면 빨간색으로 DIV "데코"변화의 글꼴 색 ...

<div class="menu"> 
<h1> 
    <a href="#">HOME</a> <a href="#">PLAY</a> <a href="#">LOGIN</a> 
    <div id="deco">A</div> 
</h1> 
</div>

CSS :

는

body { 
height:100%; 
width:100%; 
display: block; 
background-color: #000; 
overflow: hidden; 
margin: 0; 
padding:0; 
} 

.menu { 

margin-top:10%; 
margin-left: auto; 
margin-right: auto; 
text-align: center; 
} 

h1 { 
font-family: "Dauphin"; 
color: #FFFFFF; 
} 

a { 
color: #FFF; 
text-decoration: none; 
} 


a:hover #deco{ 
color: red; 
} 

#deco { 
font-family: "Invader"; 
top: 123px; 
color: #FFF; 
width:100%; 
height:100%; 
text-align: center; 
}

출처

2012-12-19 moritzg

당신의 선택은 요소와 일치하지 않습니다. a:hover #deco이 작동하려면 사업부는과 같이 앵커 내부에서 살고있다 : 당신이를 지원하지 않는 브라우저를 지원해야하는 경우

a:hover ~ #deco

<a href="#">HOME 
    <div id="deco">A</div> 
</a>

최신 브라우져는 일반 형제 선택 ~를 지원 는 CSS를

$('a').hover(
    function() { $('#deco').addClass('link-hover'); }, 
    function() { $('#deco').removeClass('link-hover'); });

그리고 정의 : 일반 형제 선택, 당신은이 같은 jQuery를 뭔가로 이것을 달성 할 수

#deco.link-hover { 
    color: red; 
}

출처

2012-12-19 20:02:51

아아 나는 완전히 그것을 보지 못했다. 아마 내가 쉬어야 할 것이다! 어쨌든이 환상적인 답변을 주셔서 감사합니다. – moritzg

@ moe2801 쾌감 :) –

#deco은 a 태그의 하위 요소가 아니기 때문에 작동하지 않습니다.

CSS 선언 a:hover #deco은 호버 (hover) 상태에있는 앵커 요소의 자식 (예 : 내부에 포함되어 있음) 인 ID가 'deco'인 요소를 참조합니다.

작동하려면 #deco가 A 태그의 내부에 있어야합니다.이 태그는 형제 요소가 아닌 자식 요소입니다. 또는 HTML을 그대로두고 간단한 jQuery (.css 또는 .addClass를 사용하여 호버의 스타일 정의를 변경)로이 작업을 수행 할 수 있습니다.

출처

2012-12-19 20:03:07 Ennui

HTML/CSS : a : 호버가 다른 div를 변경하지 않는 것 같습니까?

답변

관련 문제