누군가가 <a>
요소 를 가리킬 때 div를 표시하고 싶지만 JavaScript가 아닌 CSS 에서이 작업을 수행하고 싶습니다. 이것이 어떻게 달성 될 수 있는지 아십니까?
답변
당신은 같은 것을 할 수있는 이 :
div {
display: none;
}
a:hover + div {
display: block;
}
<a>Hover over me!</a>
<div>Stuff shown on hover</div>
이것은 인접한 형제 선택기를 사용하며 suckerfish 드롭 다운 메뉴 의 기본입니다 .
HTML5를 사용하면 앵커 요소가 거의 모든 것을 래핑 할 수 있으므로이 경우 요소를 앵커 div
의 자식으로 만들 수 있습니다. 그렇지 않으면 원리는 동일합니다. :hover
유사 클래스를 사용하여 display
다른 요소 의 속성 을 변경하십시오 .
답변
.showme {
display: none;
}
.showhim:hover .showme {
display: block;
}
<div class="showhim">HOVER ME
<div class="showme">hai</div>
</div>
이 답변이 인기가 있기 때문에 작은 설명이 필요하다고 생각합니다. 내부 요소를 마우스로 가리킬 때이 방법을 사용하면 사라지지 않습니다. .showme는 .showhim 내부에 있기 때문에 마우스를 두 줄의 텍스트 (또는 그 밖의 텍스트)간에 이동해도 사라지지 않습니다.
다음은 이러한 동작을 구현할 때주의해야 할 요구 사항의 예입니다.
그것은 모두 당신이 이것을 위해 필요한 것에 달려 있습니다. 이 방법은 메뉴 스타일 시나리오에 적합하고 Yi Jiang 은 툴팁에 적합합니다.
답변
불투명도를 사용하는 것이 더 낫다는 것을 알았습니다 .CSS3 전환을 추가 하여 멋진 완성 된 호버 효과를 만들 수 있습니다. 이전 IE 브라우저에서 전환이 중단되므로 정상적으로 성능이 저하됩니다.
#stuff {
opacity: 0.0;
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}
#hover {
width:80px;
height:20px;
background-color:green;
margin-bottom:15px;
}
#hover:hover + #stuff {
opacity: 1.0;
}
<div id="hover">Hover</div>
<div id="stuff">stuff</div>
답변
나는 전문가라는 것을 알고 있지만이 코드에 대해 무언가를 해낸 것에 대해 매우 자랑스럽게 생각합니다. 당신이 할 경우 :
div {
display: none;
}
a:hover > div {
display: block;
}
( ‘>’참고) 트리거 (자체의 div에 있거나 태그에 똑바로 있거나 원하는 항목)가 물리적으로 닿는 한 모든 것을 태그에 포함시킬 수 있습니다. 공개 div, 당신은 마우스를 서로 이동할 수 있습니다.
어쩌면 이것이 큰 도움이되지는 않지만 공개 된 div를 overflow : auto로 설정해야하기 때문에 때로는 스크롤 막대가 있었기 때문에 div에서 멀어지면 바로 사용할 수 없었습니다.
실제로, 공개 div를 만드는 방법을 마침내 연구 한 후에 (이제는 형제가 아닌 방아쇠의 자식이지만) z-index 측면에서 방아쇠 뒤에 앉아 있습니다 (이 페이지의 약간의 도움으로) : 부모 요소를 자식 위에 표시하는 방법 ) 공개 div를 스크롤하여 스크롤 할 필요조차 없으며 트리거 위에 마우스를 올려 놓고 바퀴 등을 사용하십시오.
내 공개 div는 대부분의 페이지를 다루 므로이 기술은 마우스를 움직일 때마다 화면이 한 상태에서 다른 상태로 깜박이지 않고 훨씬 영구적입니다. 실제로는 정말 직관적이기 때문에 내가 정말 자랑스러워하는 이유는 무엇입니까?
유일한 단점은 전체에 링크를 넣을 수는 없지만 전체를 하나의 큰 링크로 사용할 수 있다는 것입니다.
답변
이 답변은 표시 할 때 hideable 요소가 어떤 유형의 표시 (인라인 등)인지 알 필요가 없습니다.
.hoverable:not(:hover) + .show-on-hover {
display: none;
}
<a class="hoverable">Hover over me!</a>
<div class="show-on-hover">I'm a block element.</div>
<hr />
<a class="hoverable">Hover over me also!</a>
<span class="show-on-hover">I'm an inline element.</span>
답변
Yi Jiang이 제공하는 올바른 솔루션으로 확장되는이 범용 템플릿 솔루션을 제공하고 싶습니다.
추가 혜택은 다음과 같습니다.
- 모든 요소 유형 또는 여러 요소에 마우스를 올려 놓기 지원
- 팝업은 객체를 포함한 모든 요소 유형 또는 요소 집합 일 수 있습니다.
- 자체 문서화 코드;
- 팝업이 다른 요소 위에 표시되도록합니다.
- 데이터베이스에서 html 코드를 생성하는 경우 따라야 할 기준입니다.
html에서 다음 구조를 배치하십시오.
<div class="information_popup_container">
<div class="information">
<!-- The thing or things you want to hover over go here such as images, tables,
paragraphs, objects other divisions etc. -->
</div>
<div class="popup_information">
<!-- The thing or things you want to popup go here such as images, tables,
paragraphs, objects other divisions etc. -->
</div>
</div>
CSS에서 다음 구조를 배치하십시오.
div.information_popup_container {
position: absolute;
width:0px;
height:0px;
/* Position Information */
/* Appearance Information */
}
div.information_popup_container > div.information {
/* Position Information */
/* Appearance Information */
}
div.information_popup_container > div.popup_information {
position: fixed;
visibility: hidden;
/* Position Information */
/* Appearance Information */
}
div.information_popup_container > div.information:hover + div.popup_information {
visibility: visible;
z-index: 200;
}
몇 가지 참고할 사항은 다음과 같습니다.
- div.popup의 위치가 고정으로 설정되어 있기 때문에 (절대적으로도 작동 할 수 있음) 내용이 문서의 정상적인 흐름 내에 있지 않아 visible 속성이 제대로 작동합니다.
- z-index는 div.popup이 다른 페이지 요소 위에 나타나도록 설정되어 있습니다.
- information_popup_container는 작은 크기로 설정되어 있으므로 마우스 오버 할 수 없습니다.
- 이 코드는 div.information 요소 위에 마우스를 올려 놓는 것만 지원합니다. div.information과 div.popup 둘 다를 가리키면 아래의 팝업 위로 가리 키기를 참조하십시오.
- Opera 12.16 Internet Explorer 10.0.9200, Firefox 18.0 및 Chrome 28.0.15에서 예상대로 테스트되었으며 작동합니다.
팝업 위로 마우스를 가져갑니다
추가 정보로. 팝업에 잘라내어 붙여 넣을 정보가 있거나 상호 작용할 객체가 포함 된 경우 먼저 바꾸십시오.
div.information_popup_container > div.information:hover + div.popup_information {
visibility: visible;
z-index: 200;
}
와
div.information_popup_container > div.information:hover + div.popup_information
,div.information_popup_container > div.popup_information:hover {
visibility: visible;
z-index: 200;
}
둘째, div.information과 겹치도록 div.popup의 위치를 조정하십시오. 커서를 div.information 밖으로 이동할 때 div.popup이 호버를 수신 할 수 있도록 몇 픽셀로 충분합니다.
Internet Explorer 10.0.9200에서는 예상대로 작동하지 않으며 Opera 12.16, Firefox 18.0 및 Google Chrome 28.0.15에서는 예상대로 작동합니다.
팝업 멀티 레벨 메뉴가있는 완전한 예제는 fiddle http://jsfiddle.net/F68Le/ 을 참조하십시오 .
답변
이 코드를 테스트하십시오
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
div
{
display:none;
color:black
width:100px;
height:100px;
background:white;
animation:myfirst 9s;
-moz-animation:myfirst 9s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
0% {background:blue;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background:white;}
50% {background:blue;}
100% {background:green;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
a:hover + div{
display:inline;
}
</style>
</head>
<body>
<a href="#">Hover over me!</a>
<div>the color is changing now</div>
<div></div>
</body>
</html>