ใช้ CSS เท่านั้นแสดง div เมื่อวางเมาส์บน <a>

ฉันต้องการที่จะแสดง div เมื่อมีคนอยู่เหนือ<a>องค์ประกอบ แต่ฉันต้องการทำเช่นนี้ใน CSS ไม่ใช่ JavaScript คุณรู้หรือไม่ว่าสิ่งนี้สามารถเกิดขึ้นได้อย่างไร?

คุณสามารถทำสิ่งนี้ :

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 อยู่ใน. แสดงว่ามันจะไม่หายไปเมื่อคุณเลื่อนเมาส์ระหว่างข้อความสองบรรทัด (หรืออะไรก็ตาม)

นี่เป็นตัวอย่างของ quirq ที่คุณต้องดูแลเมื่อใช้งานพฤติกรรมดังกล่าว

ทุกอย่างขึ้นอยู่กับสิ่งที่คุณต้องการสำหรับ วิธีนี้ดีกว่าสำหรับสถานการณ์สไตล์เมนูขณะที่Yi Jiangดีกว่าสำหรับคำแนะนำเครื่องมือ

ฉันพบว่าการใช้ opacity ดีกว่าจะช่วยให้คุณสามารถเพิ่มการเปลี่ยน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 ที่เปิดเผยของฉันให้เป็นล้น: อัตโนมัติดังนั้นบางครั้งก็มีแถบเลื่อนซึ่งไม่สามารถใช้งานได้ทันทีที่คุณย้ายออกจาก div

ในความเป็นจริงในที่สุดหลังจากทำงานหาวิธีเปิดเผย div (แม้ว่าตอนนี้จะเป็นลูกของทริกเกอร์ไม่ใช่พี่น้อง) ให้นั่งหลังไกในแง่ของดัชนี z (ด้วยความช่วยเหลือเล็กน้อยจากหน้านี้ : วิธีทำให้องค์ประกอบผู้ปกครองปรากฏเหนือเด็ก ) คุณไม่จำเป็นต้องเลื่อน div ที่เปิดเผยเพื่อเลื่อนเพียงแค่ลอยอยู่เหนือไกปืนและใช้วงล้อของคุณหรืออะไรก็ตาม

Div ที่เปิดเผยของฉันครอบคลุมส่วนใหญ่ของหน้าดังนั้นเทคนิคนี้ทำให้มันถาวรมากขึ้นแทนที่จะเป็นหน้าจอที่กระพริบจากสถานะหนึ่งไปอีกรัฐหนึ่งด้วยการเลื่อนเมาส์ทุกครั้ง มันเป็นสัญชาตญาณจริงๆดังนั้นทำไมฉันถึงภูมิใจในตัวเองมาก

ข้อเสียเพียงอย่างเดียวคือคุณไม่สามารถใส่ลิงค์ในสิ่งทั้งหมด แต่คุณสามารถใช้สิ่งทั้งหมดเป็นลิงค์ใหญ่

คำตอบนี้ไม่ต้องการให้คุณทราบประเภทของการแสดงผล (อินไลน์และอื่น ๆ ) องค์ประกอบที่ซ่อนได้ควรจะเป็นเมื่อมีการแสดง:

.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 ถูกกำหนดเป็นคงที่ (จะทำงานด้วยสัมบูรณ์) เนื้อหาจึงไม่อยู่ในโฟลว์ปกติของเอกสารซึ่งทำให้แอตทริบิวต์ที่มองเห็นนั้นทำงานได้ดี
2. ดัชนี z ถูกตั้งค่าเพื่อให้แน่ใจว่า div.popup ปรากฏขึ้นเหนือองค์ประกอบของหน้าอื่น ๆ
3. information_popup_container ถูกตั้งค่าเป็นขนาดเล็กจึงไม่สามารถโฮเวอร์เหนือ
4. รหัสนี้รองรับการวางเมาส์เหนือองค์ประกอบ div.information หากต้องการสนับสนุนการวางเมาส์เหนือทั้ง div.information และ div.popup ให้ดู Hover Over The Popup ด้านล่าง
5. ได้รับการทดสอบและใช้งานได้ตามที่คาดหวังใน Opera 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.information พิกเซลเพียงไม่กี่พิกเซลก็เพียงพอที่จะตรวจสอบให้แน่ใจว่า div.popup สามารถรับโฮเวอร์เมื่อย้าย cusor ออกจาก div.information

สิ่งนี้ไม่ทำงานตามที่คาดไว้กับ 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 ที่ซ่อนอยู่โดยไม่เห็นมันหายไปทุกครั้งที่ฉันปล่อยให้องค์ประกอบทริกเกอร์ (ในกรณีนั้น) ฉันต้องเพิ่ม:

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>