CSS에서 div의 내용을 숨기는 방법

Question

이 html 코드가

<div id="mybox"> aaaaaaa </div> 

이 내 CSS

#mybox{ 
    background-color:green; 
} 

#mybox:hover{ 
    background-color:red; 
} 

질문은 div (aaaaaaa)의 내용을 숨길 때 CSS를 사용하여 마우스를 가져 가야 이벤트 코드의 구조 변경 #mybox:hover 아래에 몇 가지 코드를 넣어야한다고 생각하지만 코드를 모릅니다.

도움을 위해 미리 감사드립니다

Answer 1

마크 업을 변경하거나 JavaScript를 사용하지 않고 텍스트 색상을 knut으로 변경하거나 text-indent : -1000em;

IE6에서는 앵커 요소가 아닌 다른 요소의 호버 선택기를 읽지 않으므로 Dean Edwards' IE7과 같은 것을 사용해야합니다.

정말하지만, 당신은 요소의 어떤 종류 (같은 p 또는 span 또는 a)에 텍스트를 넣고 호버에 대한 것과 display: none;을 설정하는 것이 더 낫다.

Answer 2

사전에 당신은 배경 색상과 같은 텍스트 색상을 만들 수 태그. 이를 위해 JavaScript를 통합하여 마우스 오버시 div에 클래스를 추가해야합니다.

Answer 3

#mybox:hover { display: none; } 
#mybox:hover { visibility: hidden; } 
#mybox:hover { background: none; } 
#mybox:hover { color: green; } 

: 도움

Answer 4

CSS를 통한 숨김은 "가시성"또는 "표시"속성 중 하나를 사용하여 수행됩니다. 둘 다 비슷한 결과를 얻지 만 차이점을 아는 것이 유용합니다. 당신은 단지 요소를 숨길 수 있지만, 차지하는 공간을 유지하려면

, 당신은 사용해야합니다

#mybox:hover { 
    visibility: hidden; 
} 

을 당신이 차지하는 공간을 요소를 숨기거나 제거 할 경우, 다른 요소 있도록 공간을 차지할 수 있다면 다음을 사용해야합니다.

#mybox:hover { 
    display: none; 
} 

또한 IE6 이하는 응답하지 않습니다.

.hide { display: none; } 

Answer 5

바보 같은 소리지만 글꼴 크기 : CSS에서 "숨기기"클래스를

document.getElementById('mybox').className = 'hide'; 

및 정의 : 어떤 경우에, 당신은 클래스 명을 변경하는 일부 자바 스크립트가 필요합니다 0; 그냥 작동 할 수도 있습니다. 그것은 나를 위해했다. 그리고 이것을 보여줄 필요가있는 자식 요소로 쉽게 덮어 쓸 수 있습니다.

Answer 6

가장 좋은 방법은 늦은 대답하지만 여전히, 투명 색상을 설정 추측하는 것이 최선의 방법입니다 display:none;

예

<div id="divSample" class="hideClass">hi..</div> 
<style> 
.hideClass 
{display:none;} 
</style> 

Answer 7

를 사용하여 HTML/CSS에서 숨 깁니다.

#mybox:hover{ 
background-color:red; 
} 

Answer 8

내가 말할 것이다 :

#mybox{ 
 
    background:green; 
 
} 
 

 
#mybox:hover{ 
 
    color:transparent; 
 
}

<div id="mybox"> 
 
    This text will disappear on hover 
 
</div>

이 텍스트를 숨 깁니다 만, 물론, 여전히 텍스트를 포함하지만, 텍스트를 숨길 까다로운 방법입니다 (보이지 않는 상태로 만드십시오). 그러나 잘 작동합니다.

Answer 9

죄송합니다. 7 년 늦었으나 아래 내용을 사용하여 구현할 수 있습니다.

.your-block{ 
    visibility: hidden; 
    width: 0px; 
    height: 0px; 
} 

이렇게하면 페이지의 콘텐츠가 유지되고 아무런 공간도 차지하지 않지만 display : none은 콘텐츠를 완전히 숨 깁니다.

div에서 코드를 참조해야하지만 표시 할 필요가없는 경우 위 코드를 사용하면 유용 할 수 있습니다. 관계없이 가져가의 텍스트 색상을 투명하게 만들 수있는 용기 색상의

#mybox:hover { 
    color: transparent; 
} 

: 여기

Answer 10

는 CSS3와 함께 할 수있는 가장 간단한 방법입니다.

http://caniuse.com/#feat=css3-colors

건배! :)

Answer 11

.button { 
 
     width: 40px; 
 
     height: 40px; 
 
     font-size: 0; 
 
     background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%221284%20207%2024%2024%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M1298.5%20222.9C1297.5%20223.6%201296.3%20224%201295%20224%201291.7%20224%201289%20221.3%201289%20218%201289%20214.7%201291.7%20212%201295%20212%201298.3%20212%201301%20214.7%201301%20218%201301%20219.3%201300.6%20220.5%201299.9%20221.5L1302.7%20224.2C1303%20224.6%201303.1%20225.3%201302.7%20225.7%201302.3%20226%201301.6%20226%201301.2%20225.7L1298.5%20222.9ZM1295%20222C1297.2%20222%201299%20220.2%201299%20218%201299%20215.8%201297.2%20214%201295%20214%201292.8%20214%201291%20215.8%201291%20218%201291%20220.2%201292.8%20222%201295%20222Z%22%20fill%3D%22%239299A6%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") #f0f2f5 no-repeat 50%; 
 
    }

<button class="button">Поиск</button>

Answer 12

무엇 불투명도에 대한

#mybox:hover { 
    opacity: 0; 
} 

Answer 13

그것을 할 수있는 여러 가지 방법이 있습니다 :
한 가지 방법 :

#mybox:hover { 
    display:none; 
} 

또 다른 방법 :

은 6,

#mybox:hover { 
    visibility: hidden; 
} 

은 또는 당신은 다만 수 :

#mybox:hover { 
    background:transparent; 
    color:transparent; 
}