[css] CSS 만 사용하여 <a> 위에 마우스를 올리면 div가 표시됩니다.

누군가가 <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>

jsfiddle

이 답변이 인기가 있기 때문에 작은 설명이 필요하다고 생각합니다. 내부 요소를 마우스로 가리킬 때이 방법을 사용하면 사라지지 않습니다. .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;
}

몇 가지 참고할 사항은 다음과 같습니다.

  1. div.popup의 위치가 고정으로 설정되어 있기 때문에 (절대적으로도 작동 할 수 있음) 내용이 문서의 정상적인 흐름 내에 있지 않아 visible 속성이 제대로 작동합니다.
  2. z-index는 div.popup이 다른 페이지 요소 위에 나타나도록 설정되어 있습니다.
  3. information_popup_container는 작은 크기로 설정되어 있으므로 마우스 오버 할 수 없습니다.
  4. 이 코드는 div.information 요소 위에 마우스를 올려 놓는 것만 지원합니다. div.information과 div.popup 둘 다를 가리키면 아래의 팝업 위로 가리 키기를 참조하십시오.
  5. 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>