Hanya menggunakan CSS, tampilkan div saat mengarahkan kursor di atas <a>

Saya ingin menunjukkan div ketika seseorang mengarahkan <a>elemen, tapi saya ingin melakukan ini dalam CSS dan bukan JavaScript. Apakah Anda tahu bagaimana ini bisa dicapai?

Anda dapat melakukan sesuatu seperti ini :

div {
    display: none;
}
    
a:hover + div {
    display: block;
}

<a>Hover over me!</a>
<div>Stuff shown on hover</div>

Ini menggunakan pemilih saudara yang berdekatan , dan merupakan dasar dari menu dropdown suckerfish .

HTML5 memungkinkan elemen jangkar untuk membungkus hampir semua hal, jadi dalam hal ini divelemen tersebut dapat dibuat sebagai anak jangkar. Kalau tidak, prinsipnya sama - gunakan :hoverpseudo-class untuk mengubah displayproperti elemen lain.

.showme {
  display: none;
}

.showhim:hover .showme {
  display: block;
}

<div class="showhim">HOVER ME
  <div class="showme">hai</div>
</div>

jsfiddle

Karena jawaban ini populer saya pikir diperlukan sedikit penjelasan. Menggunakan metode ini ketika Anda mengarahkan pada elemen internal, itu tidak akan hilang. Karena .showme ada di dalam .showhim, ia tidak akan hilang saat Anda menggerakkan mouse di antara dua baris teks (atau apa pun itu).

Ini adalah contoh quirqs yang perlu Anda perhatikan ketika menerapkan perilaku tersebut.

Itu semua tergantung untuk apa Anda membutuhkannya. Metode ini lebih baik untuk skenario gaya menu, sedangkan Yi Jiang lebih baik untuk tooltips.

Saya menemukan menggunakan opacity lebih baik, ini memungkinkan Anda untuk menambahkan transisi CSS3 untuk membuat efek hover selesai yang bagus. Transisi hanya akan dijatuhkan oleh browser IE lama, sehingga terdegradasi dengan anggun ke.

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

Saya tahu benar-benar ahli, tetapi saya sangat bangga pada diri saya sendiri karena telah melakukan sesuatu tentang kode ini. Jika kamu melakukan:

div {
    display: none;
}

a:hover > div {
    display: block;
} 

(Catat '>') Anda dapat memuat semuanya dalam sebuah tag, kemudian, selama pemicu Anda (yang bisa dalam div itu sendiri, atau langsung di tag, atau apa pun yang Anda inginkan) menyentuh secara fisik div yang terungkap, Anda dapat memindahkan mouse Anda dari satu ke yang lain.

Mungkin ini tidak berguna untuk banyak hal, tetapi saya harus mengatur div terungkap saya menjadi melimpah: otomatis, jadi kadang-kadang ada bilah gulir, yang tidak dapat digunakan segera setelah Anda menjauh dari div.

Bahkan, setelah akhirnya mengetahui cara membuat div yang terungkap, (meskipun sekarang menjadi anak pemicu, bukan saudara kandung), duduk di belakang pemicu, dalam hal z-index, (dengan sedikit bantuan dari halaman ini : Cara mendapatkan elemen induk agar muncul di atas anak ) Anda bahkan tidak perlu menggulingkan div yang terungkap untuk menggulirnya, tetaplah melayang di atas pelatuk dan gunakan roda Anda, atau apa pun.

Div saya yang terungkap mencakup sebagian besar halaman, jadi teknik ini membuatnya jauh lebih permanen, daripada layar berkedip dari satu negara ke negara lain dengan setiap gerakan mouse. Ini sebenarnya sangat intuitif, karena itu saya sangat bangga pada diri saya sendiri.

Satu-satunya downside adalah bahwa Anda tidak dapat menempatkan tautan di dalam semuanya, tetapi Anda dapat menggunakan semuanya sebagai satu tautan besar.

Jawaban ini tidak mengharuskan Anda mengetahui jenis tampilan apa (inline, dll.) Elemen yang disembunyikan ketika ditampilkan:

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

Ini menggunakan pemilih saudara yang berdekatan dan pemilih tidak .

Saya ingin menawarkan solusi templat tujuan umum ini yang memperluas solusi yang tepat yang disediakan oleh Yi Jiang.

Manfaat tambahan termasuk:

• dukungan untuk melayang di atas semua jenis elemen, atau beberapa elemen;
• popup dapat berupa jenis elemen atau set elemen apa pun, termasuk objek;
• kode dokumentasi diri;
• memastikan pop-up muncul di atas elemen lain;
• dasar yang kuat untuk diikuti jika Anda menghasilkan kode html dari database.

Di html Anda menempatkan struktur berikut:

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

Di css Anda menempatkan struktur berikut:

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;
}

Beberapa hal yang perlu diperhatikan adalah:

1. Karena posisi div.popup diatur ke tetap (juga akan berfungsi dengan absolut) konten tidak di dalam aliran normal dokumen yang memungkinkan atribut yang terlihat berfungsi dengan baik.
2. z-index diatur untuk memastikan bahwa div.popup muncul di atas elemen halaman lainnya.
3. Information_popup_container diatur ke ukuran kecil dan dengan demikian tidak dapat diarahkan.
4. Kode ini hanya mendukung melayang di atas elemen div.information. Untuk mendukung melayang-layang di atas div.information dan div.popup, lihat Hover Over The Popup di bawah ini.
5. Ini telah diuji dan berfungsi seperti yang diharapkan di Opera 12.16 Internet Explorer 10.0.9200, Firefox 18.0 dan Google Chrome 28.0.15.

Arahkan kursor ke atas

Sebagai informasi tambahan. Ketika popup berisi informasi yang mungkin ingin Anda potong dan tempel atau berisi objek yang mungkin ingin Anda berinteraksi, ganti dulu:

div.information_popup_container > div.information:hover + div.popup_information {
visibility: visible;
z-index: 200;
}

dengan

div.information_popup_container > div.information:hover + div.popup_information 
,div.information_popup_container > div.popup_information:hover {
visibility: visible;
z-index: 200;
}

Dan kedua, sesuaikan posisi div.popup sehingga ada tumpang tindih dengan informasi div.popup. Beberapa piksel cukup untuk memastikan bahwa div.popup dapat menerima hover saat memindahkan cusor off div.information.

Ini tidak berfungsi seperti yang diharapkan dengan Internet Explorer 10.0.9200 dan tidak berfungsi seperti yang diharapkan dengan Opera 12.16, Firefox 18.0 dan Google Chrome 28.0.15.

Lihat fiddle http://jsfiddle.net/F68Le/ untuk contoh lengkap dengan menu multilevel popup.

silakan uji kode ini

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

The +memungkinkan 'pilih' hanya pertama tidak elemen bersarang, >elemen bersarang pilih hanya - yang lebih baik adalah dengan menggunakan ~yang memungkinkan untuk memilih elemen sewenang-wenang yang anak orang tua melayang elemen. Menggunakan opacity / lebar dan transisi Anda dapat memberikan tampilan yang halus

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>

Bagi saya, jika saya ingin berinteraksi dengan div tersembunyi tanpa melihatnya menghilang setiap kali saya meninggalkan elemen pemicu (a dalam hal itu) saya harus menambahkan:

div:hover {
    display: block;
}

Berdasarkan jawaban utama, ini adalah contoh, berguna untuk menampilkan tip informasi saat mengklik ?tautan di dekat:

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>

Dari pengujian saya menggunakan CSS ini:

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

Dan HTML ini:

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

, itu menghasilkan bahwa ia memperluas menggunakan yang kedua, tetapi tidak memperluas menggunakan yang pertama. Jadi jika ada div antara target hover dan div tersembunyi, maka itu tidak akan berfungsi.

HTML

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

CSS

 div+div {
    display: none;
 }

 div:hover +div {
   display: block;
 }

CodePen: arahkan kursor pada teks acara div di div lain

Jangan lupa jika Anda mencoba untuk melayang-layang di sekitar gambar, Anda harus meletakkannya di sekitar wadah. css:

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

.brand-sales {
    display: none;
}

Jika Anda mengarahkan ini:

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

Ini akan menunjukkan:

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