CSS span hover가 작동하지 않습니다.

사용자가 스팬의 일부 텍스트를 가리킬 때 이미지가 표시되도록하려고합니다. 사용자가 전체 div에서 마우스를 가져 가면 작동하도록했지만 그 부분을 트리거하려고합니다. 여기에 전체 코드는 다음과 같습니다 CSS span hover가 작동하지 않습니다.

<html> 
<head> 
<title>gif test</title> 

<style> 
#gif { 
    position: absolute; 
    left: 50px; 
    top: 120px; 
    display: none; 
} 
#trigger:hover #gif { 
    display: block; 
} 

</style> 
</head> 

<body style="font-family:Helvetica;"> 
<h1>gif test</h1> 
<hr noshade /> 

<p>Hover <span id="trigger">here</span></p> 
<div id="gif"><img src="img/hey.gif" /></div> 
</body> 

</html>

내가 그렇게 사용자가 "여기"를 통해 자신의 마우스를두고 때 싶었다, 영상 쇼,하지만 마우스는 "호버"이상합니다. 호버가 같은 방식으로 작동하지 못하게하는 스팬에 특별한 것이 있습니까? 아니면 #gif div를 잘못 참조하고 있습니까?

감사합니다.

출처

2014-05-18 baum

'#trigger : hover # gif '는'# trigger '의 자손 인'gif'라는 ID를 가진 요소를 찾습니다. 당신의 코드에서,'# gif '는'# trigger'의 부모의 형제이며, CSS에는 부모 셀렉터가 (아직) 없습니다. – j08691

아, 그거야. 감사. 나는 내 자신의 질문에 대답 할 것이다. – baum

j08691마다 계층 구조가 잘못되었습니다. 새로운 코드 :

<html> 
<head> 
<title>gif test</title> 

<style> 
#gif { 
    position: absolute; 
    left: 50px; 
    top: 120px; 
    display: none; 
} 
#trigger:hover + #gif { 
    display: block; 
} 

</style> 
</head> 

<body style="font-family:Helvetica;"> 
<h1>gif test</h1> 
<hr noshade /> 

<p>Hover <span id="trigger">here</span> 
<span id="gif"><img src="img/hey.gif" /></span> 
</p> 

</body> 
</html>

이제 이미지가 #trigger의 형제이다 (모두 부모 <p>을하며 +는 형제 선택입니다).

출처

2014-05-18 01:32:47 baum

CSS가 틀립니다. #trigger; hover #gif는 #trigger의 자식을 의미하며 id가 gif 인 상태로 머물러 있습니다. 당신의 DOM을 의미하는 것은 있어야하는데 :

<div id='trigger'> 
    <div id='gif'><img src='img/hey.gif' /></div> 
</div>

당신이 제어 요소는 자녀 또는 형제 자매 아닌 계층 구조, 외부 요소의 상태를 제어 할 경우, CSS는 충분하지 않습니다 당신은 몇 가지가 필요합니다 javascript :

<html> 
<head> 
<title>gif test</title> 

<style> 

#gif { 
    position: absolute; 
    left: 50px; 
    top: 120px; 
    display: none; 
} 

#gif.show { 
    display: block; 
} 

</style> 
</head> 

<body style="font-family:Helvetica;"> 
<h1>gif test</h1> 
<hr noshade /> 

<p>Hover <span id="trigger" onmouseover="show()" onmouseout="hide()">here</span></p> 
<div id="gif"><img src="img/hey.gif" /></div> 
</body> 

<script type="text/javascript"> 

showBox() { 
     var gifbox = document.getElementById("gif"); 
     gifbox.classList.add("show"); 
} 

hideBox() { 
     var gifbox = document.getElementById("gif"); 
     gifbox.classList.remove("show"); 
} 

</script> 
</html>

출처

2014-05-18 01:40:52

맞지만 내 대답을보십시오. 형제 선택기도 작동합니다. – baum

형제 선택 도구가 실제로 작동하지만 DOM을 변경하여 변경하지 마십시오. 피해야합니다. –

이렇게하는 가장 좋은 방법은 무엇일까요? 자바 스크립트? – baum

CSS span hover가 작동하지 않습니다.

답변

관련 문제