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>

(가) +에만 첫째하지 중첩 된 요소를 '선택'할 수는 >선택 중첩 된 요소 만 - 더 사용할 수 있나요 ~부모의 자식 임의의 요소를 선택할 수있는 요소를 떴다. 불투명도 / 너비 및 전환을 사용하면 부드러운 모양을 제공 할 수 있습니다

div { transition: all 1s }
.ccc, .ggg { opacity: 0; color: red}
.ccc { height: 0 }

.aaa:hover ~ .bbb .ccc { opacity: 1; height: 34px }
.aaa:hover ~ .eee .fff .ggg { opacity: 1 }

<div class="aaa">Hover me... to see<br><br> </div>

<div class='bbb'>BBBBB
  <div class='ccc'>CCCCC
    <div class='ddd'>DDDDD</div>
  </div>
</div>

<div class='eee'>EEEEE
  <div class='fff'>FFFFF
    <div class='ggg'>GGGGG</div>
    <div class='hhh'>HHHHH</div>
  </div>
</div>

나를 위해 숨겨진 div와 상호 작용하려면 트리거 요소 (그 경우 a)를 떠날 때마다 사라지는 것을 보지 않고 추가해야합니다.

div:hover {
    display: block;
}

주요 답변을 기반으로 한이 예제는 ?가까운 링크를 클릭 할 때 정보 툴팁을 표시하는 데 유용합니다 .

document.onclick = function() { document.getElementById("tooltip").style.display = 'none'; };

document.getElementById("tooltip").onclick = function(e) { e.stopPropagation(); }

document.getElementById("help").onclick = function(e) { document.getElementById("tooltip").style.display = 'block';
e.stopPropagation(); };

#help { opacity: 0; margin-left: 0.1em; padding: 0.4em; }
    
a:hover + #help, #help:hover { opacity: 0.5; cursor: pointer; }

#tooltip { border: 1px solid black; display: none; padding: 0.75em; width: 50%; text-align: center; font-family: sans-serif; font-size:0.8em; }

<a href="">Delete all obsolete informations</a><span id="help">?</span>
<div id="tooltip">All data older than 2 weeks will be deleted.</div>

이 CSS를 사용한 테스트에서 :

.expandable{
display: none;
}
.expand:hover+.expandable{
display:inline !important;
}
.expandable:hover{
display:inline !important;
}

그리고이 HTML :

<div class="expand">expand</div>
<div class="expand">expand</div>
<div class="expandable">expandable</div>

결과적으로 두 번째를 사용하여 확장하지만 첫 번째를 사용하여 확장하지는 않습니다. 따라서 호버 대상과 숨겨진 div 사이에 div가 있으면 작동하지 않습니다.

HTML

<div>
    <h4>Show content</h4>
</div>
<div>
  <p>Hello World</p>
</div>

CSS

 div+div {
    display: none;
 }

 div:hover +div {
   display: block;
 }

CodePen : div 위에 마우스를 올리면 다른 div에 텍스트가 표시됩니다.

잊지 마세요. 이미지 주위에 마우스를 올리려면 이미지를 컨테이너 주위에 두어야합니다. CSS :

.brand:hover + .brand-sales {
    display: block;
}

.brand-sales {
    display: none;
}

이 위에 마우스를 올리면 :

<span className="brand">
   <img src="https://murmure.me/wp-content/uploads/2017/10/nike-square-1900x1900.jpg" 
     alt"some image class="product-card-place-logo"/>
</span>

이것은 보여줄 것이다 :

<div class="product-card-sales-container brand-sales">
    <div class="product-card-">Message from the business goes here. They can talk alot or not</div>
</div>