programing

CSS만 사용하여 divon을 다른 요소 위에 호버링합니다.

codeshow 2023. 10. 4. 23:06
반응형

CSS만 사용하여 divon을 다른 요소 위에 호버링합니다.

가 를 맴돌 때 싶습니다.<a>요소는 그렇지만 이것을 자바스크립트가 아닌 CSS로 하고 싶습니다.이것이 어떻게 이루어질 수 있는지 알고 있습니까?

다음과 같은 작업을 수행할 수 있습니다.

div {
    display: none;
}
    
a:hover + div {
    display: block;
}
<a>Hover over me!</a>
<div>Stuff shown on hover</div>

인접 형제 선택기를 사용하며, 흡어 드롭다운 메뉴의 기본이 됩니다.

것을 수 있게 그 는,div요소는 닻의 자식으로 만들 수 있습니다.그렇지 -합니다를 합니다 -합니다:hover할 유사 display다른 원소의 성질

.showme {
  display: none;
}

.showhim:hover .showme {
  display: block;
}
<div class="showhim">HOVER ME
  <div class="showme">hai</div>
</div>

jsfiddle

이 답변이 인기가 많으니 작은 설명이 필요할 것 같습니다.이 방법을 사용하면 내부 요소 위를 맴돌면 없어지지 않습니다..showme가 .showme 안에 있기 때문에 .showme이 그에게 두 줄의 텍스트 사이에서 마우스를 움직일 때(또는 그것이 무엇이든) 사라지지 않을 것입니다.

다음은 이러한 행동을 실행할 때 주의해야 하는 특이 사항의 예입니다.

이 모든 것은 당신이 무엇을 위해 이것을 필요로 하느냐에 달려있습니다.메뉴 스타일 시나리오의 경우 이 방법이 더 좋으며 도구 설명의 경우 이장 방법이 더 좋습니다.

불투명도를 사용하는 것이 더 낫다는 것을 알았습니다. cs3 전환을 추가하여 멋진 마무리 호버 효과를 만들 수 있습니다.오래된 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;
}

를 합니다.>할 수 있는 사람

태그에 전체 내용을 담을 수 있습니다. 그러면 트리거(자체 디브에 있을 수도 있고, 태그에서 똑바로 있을 수도 있고, 원하는 모든 것)가 표시된 디브에 물리적으로 닿는 한 마우스를 한 쪽에서 다른 쪽으로 이동할 수 있습니다.

아마도 이것이 많은 것에 유용하지는 않겠지만, 저는 노출된 디브를 오버플로(overflow)로 설정해야 했습니다. 오토(auto). 그래서 때때로 스크롤 바가 있어서 디브에서 벗어나자마자 사용할 수 없었습니다.

실제로, (이제는 형제가 아닌 트리거의 자식이지만) 공개된 디브를 트리거 뒤에 앉히는 방법을 최종적으로 고안한 후, z-index 측면에서 (이 페이지의 약간의 도움을 받아):부모 요소가 자식 위에 나타나도록 하는 방법) 노출된 디브를 스크롤하기 위해 롤오버할 필요도 없고, 트리거 위를 맴돌면서 휠을 사용하거나 다른 것을 사용할 필요도 없습니다.

제가 공개한 디브는 대부분의 페이지를 덮기 때문에 이 기술은 마우스를 움직일 때마다 화면이 한 상태에서 다른 상태로 깜박이는 것보다 훨씬 더 영구적으로 만듭니다.사실은 직관적이기 때문에 제 자신이 정말 자랑스러운 이유입니다.

유일한 단점은 전체에 링크를 넣을 수는 없지만 전체를 하나의 큰 링크로 사용할 수 있다는 것입니다.

이 답변은 숨길 수 있는 요소가 표시될 때 어떤 유형의 디스플레이(인라인 등)인지 알 필요가 없습니다.

.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>

인접 형제 선택기와 not 선택기를 사용합니다.

나는 이장의 정확한 해결책을 확대한 범용 템플릿 해결책을 제시하고자 합니다.

추가적인 이점은 다음과 같습니다.

  • 임의의 요소 유형 또는 다중 요소 위를 맴돌 수 있는 지원
  • 팝업은 객체를 포함하여 임의의 요소 유형 또는 요소 집합일 수 있습니다.
  • 자체 document 코드;
  • 팝업이 다른 요소 위에 나타나도록 합니다.
  • 데이터베이스에서 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의 위치가 고정으로 설정되어 있으므로 내용이 문서의 정상적인 흐름 내에 있지 않으므로 표시 가능한 속성이 잘 작동할 수 있습니다.
  2. z-index는 div. popup가 다른 페이지 요소 위에 나타나도록 설정됩니다.
  3. information_popup_container가 작은 크기로 설정되어 있으므로 오버오버할 수 없습니다.
  4. 이 코드는 div.information 요소 위에서만 호버링을 지원합니다.div.information과 div.popup 위에 맴도는 것을 지원하려면 아래의 Hover The Popping을 참조하십시오.
  5. 오페라 12.16 Internet Explorer 10.0.9200, Firefox 18.0 및 Google 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. popup의 위치를 div. 정보와 겹치도록 조정합니다.cusor off div. 정보를 이동할 때 div.popup이 호버를 수신할 수 있도록 몇 픽셀이면 충분합니다.

Internet Explorer 10.0.9200에서는 예상대로 작동하지 않으며 Opera 12.16, Firefox 18.0 및 Google Chrome 28.0.15에서는 예상대로 작동합니다.

팝업 다단계 메뉴의 전체 예는 fiddle http://jsfiddle.net/F68Le/ 을 참조하십시오.

그+'select' only netested element , , , .>중첩 요소만 선택 - 사용하는 것이 좋습니다.~이를 통해 부모 하위 요소의 자식인 임의 요소를 선택할 수 있습니다.불투명도/폭 및 전환을 사용하여 매끄러운 외관 제공

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>

이 코드를 테스트해보세요.

<!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>

트리거 요소(이 경우 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>

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 show text에서 hover on

이 방법을 따르면 숨겨진 요소 위를 맴돌더라도 요소가 나타납니다.숨김 요소를 클릭하려는 경우 유용합니다.예를 들어 삭제 옵션을 본 후 클릭하는 방법을 사용할 수 있습니다.

<style>
#delete_link {
    display: none;
}
    
a:hover + #delete_link {
    display: block;
}

#delete_link:hover{
    display: block;
}

</style>
</head>
<body>


<a>Hover over me!</a>
<div id="delete_link"><a href="#">Element show on hover</a></div>
</body>

이 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>

, 결과적으로 두 번째를 사용하여 확장할 수 있지만 첫 번째를 사용하여 확장하지는 않습니다.따라서 호버 타겟과 히든 디브 사이에 디브가 있으면 작동하지 않습니다.

잊지 마세요.이미지 주변을 맴돌려면 컨테이너 주변에 이미지를 놓아야 합니다. 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>

언급URL : https://stackoverflow.com/questions/5210033/using-only-css-show-div-on-hover-over-another-element

반응형

'programing' 카테고리의 다른 글

ASP.NET - Ajax.파라미터를 사용하여 양식 OnSuccess 콜백 시작  (0) 2023.10.04
높이가 작동하지 않는 이유: 100%는 화면 높이로 디브를 확장할 수 있습니다.  (0) 2023.10.04
조회 결과를 MySQL의 변수로 설정  (0) 2023.10.04
WordPress의 편집기에 관리 전용 하위 메뉴 링크를 표시합니다.오류가 발생합니다.  (0) 2023.10.04
$parse 대 $eval ? 어떤 것이 최선의 방법입니까?  (0) 2023.10.04

'programing'의 다른글

  • 현재글CSS만 사용하여 divon을 다른 요소 위에 호버링합니다.

관련글

댓글

티스토리툴바