반응형
요소의 텍스트 노드 숨기기 (하위 제외)
CSS에 약간의 문제가있어 해결책을 찾을 수없는 것 같습니다. 이 HTML이 있습니다
<div id="closelink">
<a href="">Close</a>
Click to close
</div>
이제 div 나 그 안의 링크를 숨기지 않고«닫으려면 클릭»텍스트 만 숨기고 싶습니다.
할 수 있습니까?
visibility이 작업을 수행 할 수 있도록 속성, 어린이 요소를 오버라이드 (override) 할 수 있습니다 :
<div id="closelink">
<a href="">Close</a>
Click to close
</div>
CSS :
#closelink {
visibility:collapse;
}
#closelink a{
visibility:visible;
}
결과는 다음과 같습니다 : http://jsfiddle.net/pavloschris/Vva84/
.closelink {
font-size: 0px;
}
.close-link a {
font-size: 12px;
}
시험
<div id="closelink">
<a href="">Close</a>
Click to close
</div>
#closelink {
position: relative;
left: -9999px;
}
#closelink a {
position: relative;
left: 9999px;
}
작동하지만 visibility:hidden대신 사용할 수 있습니다.visibility:collapse
자식 요소가 새 줄로 분리되는 것을 방지하고 (visibility : hidden / collapse; 및 visibility : visible을 사용하는 경우와 같이) 브라우저에서 9999px 블록을 그리는 것을 방지하려면 (일반적으로 불필요한 오버 헤드이므로 눈살을 찌푸립니다) 이:
<div id="closelink">
<a href="">Close</a>
Click to close
</div>
#closelink {
position: relative;
visibility: hidden;
}
#closelink a {
position: absolute;
left: 0;
top: 0;
visibility: visible;
}
left: 0값을 조정하여 약간의 패딩을 제공 할 수 있습니다 .
내가 생각할 수있는 세 가지 방법이 있습니다.
하나
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
#parent{
opacity: 1;
}
.child{
opacity: 0;
}
</style>
</head>
<body>
<div id="parent">
dkjfdkf
<span class="child">Annoying text</span>
</div>
</body>
</html>
두
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
#parent{
}
.child{
visibility: hidden;
}
</style>
</head>
<body>
<div id="parent">
dkjfdkf
<span class="child">Annoying text</span>
</div>
</body>
</html>
세
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
#parent{
}
.child{
display: none;
}
</style>
</head>
<body>
<div id="parent">
dkjfdkf
<span class="child">Annoying text</span>
</div>
</body>
</html>
불투명도는 구조를 유지하기 위해 이미지가 항상 페이지에 있기를 원하지만 이미지가 보이지 않도록하려는 경우에 가장 좋습니다. 도움이 되었기를 바랍니다.
참조 URL : https://stackoverflow.com/questions/15196630/hide-text-node-in-element-but-not-children
반응형
'Programing' 카테고리의 다른 글
| WPF C # : 끌어서 놓기를 통해 목록 상자의 항목 재정렬 (0) | 2020.12.30 |
|---|---|
| 다른 파일의 클래스에서 함수를 가져 오시나요? (0) | 2020.12.30 |
| 데이터 프레임의 인덱스에서 행 이름을 어떻게 얻습니까? (0) | 2020.12.30 |
| std :: is_unsigned 임 (0) | 2020.12.30 |
| vim을 사용하여 텍스트 상자를 편집 할 수있는 Firefox 추가 기능이 있습니까? (0) | 2020.12.30 |