간단한 CSS 호버링 문제?

내 앵커 호버가 아래의 div 상자가 노란색으로 바뀌지 않는 이유를 모르겠습니다. 여기에 내 코드입니다 : 나는 지금 매우 피곤간단한 CSS 호버링 문제?

<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<style type="text/css"> 
a {background-color:Blue; width:400px; height:200px;} 
#hide { width:500px; height:500px;background-color:black; } 
a:hover #hide {background-color:yellow; } 
</style> 
</head> 
<body> 
<a>hover</a> 
<div id="hide">turn yellow</div> 
</body> 
</html>

, 그래서 뭔가 간단

출처

2010-07-27 John

당신은 hide를 도입하기 전에 <a>을 닫는 그래서 경로를 내려다해야

a:hover #hide

것 적용되지 않습니다.

출처

2010-07-27 18:14:59

감사합니다. 낮잠을 자야한다고 생각합니다. 너무 피곤했습니다. – John

A : 호버 #hide가 - 당신은 앵커 태그 당신이 보여 HTML에서

내부에 포함 된 아이에게 스타일을 적용해야 의미는 DIV의 #hide는 앵커 태그의 자식이 아닌

HTH

출처

2010-07-27 18:15:16 Sunny

나는 이것이 작동하지 않을 것이라고 생각합니다.

<a onmouseover="document.getElementById("hide").stylebackgroundcolor='yellow'">hover</a>

출처

2010-07-27 18:16:37 sTodorov

'onclick! = hover' –

죄송합니다. – sTodorov

귀하의 HTML 작업에 CSS에 대해 다음과 같아야합니다 :

<a>hover 
    <div id="hide">turn yellow</div> 
</a>

을하지만 다시 나는 그것은 유효한 마크 업하지 않습니다 두려워 난 당신이 자바 스크립트를 통해 색상을 갖고있을 것. 당신이 CSS에서 한 경우

<div>hover 
    <div id="hide">turn yellow</div> 
</div>

그러나 아직 : 그 해결하려면 div 다른에 있음을 감쌌다 수 IE6에서 작동하지 않습니다

div:hover{.....}

는 IE6가 :hover 의사 선택을 지원하기 때문에 단지 링크.

var el = document.getElementById('link'); 
var dv = document.getElementById('hide'); 

el.onmouseover = function(){  
    dv.style.backgroundColor = 'yellow'; 
}; 

el.onmouseout = function(){ 
    dv.style.backgroundColor = 'blue'; 
};

출처

2010-07-27 18:17:24 Sarfraz

당신은 * 유효한 * 마크 업이 아닙니다. :) –

@Pekka : 정확한 용어에 감사드립니다. :) – Sarfraz

a:hover #hide {background-color:yellow; }

이 존재하지 않는 : 당신은이 같은 자바 스크립트를 사용할 필요가

<a id="link">hover</a> 
<div id="hide">turn yellow</div>

그래서 간단한 솔루션은이 링크 (마크 업 구조)를 사용하려는 경우 , 당신은 이것을 원한다 :

a:hover div#hide

a:hover + #hide {background-color:yellow;}

: 최신 브라우저에서

<a>hover 
    <div id="hide">turn yellow</div> 
</a>

출처

2010-07-27 18:19:31 Organiccat

'a : hover # hide'와'a : hover div # hide'는 기본적으로 같은 선택자입니다. –

이 너무 (인접 형제 선택자 '+')를 작동합니다 :이 원하는 결과 인 경우는 당신은 당신의 앵커 내부에 사업부를 데려 가고 싶다는 그러나 그것은 다소 이상 할 것입니다. div을 a 안에 넣는 것을 언급하는 솔루션은 html의 일반적인 형식입니다. 그러나 유효한 html로 만들려면 div을 span으로 변경해야하고 div의 블록 품질이 필요하면 display: block으로 설정해야합니다.

출처

2010-07-27 18:25:02 ScottS

다른 포스터에서 언급했듯이 #hide div를 링크 안에 배치 할 수 있습니다. 당신이 정말로 외부 링크 사업부를 원하는 경우, 당신은 사용할 수 있습니다

a:hover + #hide { background-color:yellow; }

이를 링크가 마우스 커서를 올려 확인한 후 직접 오는 ID hide를 가진 요소의 스타일을해야한다.

출처

2010-07-27 18:26:33 derekerdmann

a:hover #hide 목표, 예를 이것에 대한 요소 어떤 내부 ID "숨기기"인 요소 : 당신이 귀하의 경우에는 정말 후있어하는 것은, a:hover + #hide입니다

<a href="..."> 
<span id="hide">...</span> 
</a>

이 "를 가진 요소를 의미로 id는 "숨어있는 앵커 요소 바로 뒤에"숨 깁니다. "

출처

2010-07-27 18:29:07

간단한 CSS 호버링 문제?

답변

관련 문제