Mengubah CSS elemen anak ketika orang tua melayang

159

Pertama-tama, saya menganggap ini terlalu rumit untuk CSS3, tetapi jika ada solusi di sana, saya akan senang menggunakannya.

HTML cukup mudah.

<div class="parent">
    <div class="child">
        Text Block 1
    </div>
</div>

<div class="parent">
    <div class="child">
        Text Block 2
    </div>
</div>

Div anak diatur untuk ditampilkan: tidak ada; secara default, tetapi kemudian berubah untuk menampilkan: blok; ketika mouse berada di atas div induk. Masalahnya adalah bahwa markup ini muncul di beberapa tempat di situs saya, dan saya hanya ingin anak itu ditampilkan jika mouse di atas orang tuanya, dan tidak jika mouse berada di atas salah satu dari orang tua lainnya (mereka semua memiliki kelas yang sama nama dan tanpa ID).

Saya sudah mencoba menggunakan $(this)dan .children()tidak berhasil.

$('.parent').hover(function(){
            $(this).children('.child').css("display","block");
        }, function() {
            $(this).children('.child').css("display","none");
        });
jquery css jquery-selectors parent Hartley Brody
sumber

Jawaban:

260

Mengapa tidak menggunakan CSS saja?

.parent:hover .child, .parent.hover .child { display: block; }

dan kemudian tambahkan JS untuk IE6 (di dalam komentar kondisional misalnya) yang tidak mendukung: arahkan dengan benar:

jQuery('.parent').hover(function () {
    jQuery(this).addClass('hover');
}, function () {
    jQuery(this).removeClass('hover');
});

Ini contoh singkatnya : Fiddle

Stephen
sumber
kode itu tidak berfungsi untuk saya. apakah itu seharusnya mengatakan ".parent.hover" dan bukan ".parent: hover" ?? Jika saya belum pernah melihat apa yang Anda miliki sebelumnya. dan bukankah koma menunjukkan beberapa penyeleksi mengambil gaya yang sama? saya tidak melihat bagaimana itu membantu di sini. sedikit info lebih lanjut tentang CSS itu, tolong 0 =]
Hartley Brody
6
:hoveradalah salah satu "Dynamic pseudo-class" yang didefinisikan oleh CSS2 ( inilah spesifikasi ). Berikut adalah contoh cepat: http://jsfiddle.net/5FLr4/ . ini bekerja untuk saya.
Lee
ahh terima kasih banyak! Saya sebenarnya memiliki beberapa posisi relatif yang mendorong teks anak keluar dari pandangan ... doh! >. <Saya menghargai bantuannya!
Hartley Brody
Tampaknya ini tidak akan berfungsi untuk .child :: - webkit-scrollbar-thumb jika Anda ingin mengubah highlight dari scrollbar di dalam elemen anak.
thdoan
1
.parent:not(:hover) .child { display: none; }tampaknya bekerja dengan baik untuk saya, meskipun saya tentu tidak khawatir tentang IE6. Tetapi dengan cara ini saya dapat menggunakannya pada elemen yang saya tidak ingin memiliki displayproperti seragam .
Blair Connolly
147

Tidak perlu menggunakan JavaScript atau jquery, CSS sudah cukup:

.child{ display:none; }
.parent:hover .child{ display:block; }

MELIHAT DEMO

Ali Adravi
sumber
9

Gunakan toggleClass().

$('.parent').hover(function(){
$(this).find('.child').toggleClass('color')
});

dimana colorkelasnya Anda dapat menata kelas sesuai keinginan untuk mencapai perilaku yang Anda inginkan. Contoh menunjukkan bagaimana kelas ditambahkan dan dihapus saat mouse masuk dan keluar.

Lihat contoh Bekerja di sini .

Hussein
sumber
7 
.parent:hover > .child {
    /*do anything with this child*/
}
Amir Rahman
sumber
3

Jawaban Stephen benar, tetapi inilah adaptasi saya atas jawabannya:

HTML

<div class="parent">
    <p> parent 1 </p>
    <div class="child">
        Text Block 1
    </div>
</div>

<div class="parent">
    <p> parent 2 </p>
    <div class="child">
        Text Block 2
    </div>
</div>

CSS

.parent { width: 100px; min-height: 100px; color: red; }
.child { width: 50px; min-height: 20px; color: blue; display: none; }
.parent:hover .child, .parent.hover .child { display: block; }

jQuery

//this is only necessary for IE and should be in a conditional comment

jQuery('.parent').hover(function () {
    jQuery(this).addClass('hover');
}, function () {
    jQuery(this).removeClass('hover');
});

Anda dapat melihat contoh ini bekerja di jsFiddle .

Roger Roelofs
sumber
3

Saya memiliki apa yang saya pikir merupakan solusi yang lebih baik, karena dapat ditingkatkan ke lebih banyak level, sebanyak yang diinginkan, tidak hanya dua atau tiga.

Saya menggunakan batas, tetapi juga bisa dilakukan dengan gaya apa pun yang diinginkan, seperti warna latar belakang.

Dengan perbatasan, idenya adalah untuk:

  • Memiliki warna perbatasan yang berbeda hanya satu div, div di mana mouse berada, bukan pada orang tua mana pun, bukan pada anak mana pun, sehingga dapat dilihat hanya perbatasan div tersebut dalam warna yang berbeda sementara sisanya tetap putih.

Anda dapat mengujinya di: http://jsbin.com/ubiyo3/13

Dan ini kodenya:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Hierarchie Borders MarkUp</title>
<style>

  .parent { display: block; position: relative; z-index: 0;
            height: auto; width: auto; padding: 25px;
          }

  .parent-bg { display: block; height: 100%; width: 100%; 
               position: absolute; top: 0px; left: 0px; 
               border: 1px solid white; z-index: 0; 
             }
  .parent-bg:hover { border: 1px solid red; }

  .child { display: block; position: relative; z-index: 1; 
           height: auto; width: auto; padding: 25px;
         }

  .child-bg { display: block; height: 100%; width: 100%; 
              position: absolute; top: 0px; left: 0px; 
              border: 1px solid white; z-index: 0; 
            }
  .child-bg:hover { border: 1px solid red; }

  .grandson { display: block; position: relative; z-index: 2; 
              height: auto; width: auto; padding: 25px;
            }

  .grandson-bg { display: block; height: 100%; width: 100%; 
                 position: absolute; top: 0px; left: 0px; 
                 border: 1px solid white; z-index: 0; 
               }
  .grandson-bg:hover { border: 1px solid red; }

</style>
</head>
<body>
  <div class="parent">
    Parent
    <div class="child">
      Child
      <div class="grandson">
        Grandson
        <div class="grandson-bg"></div>
      </div>
      <div class="child-bg"></div>
    </div>
    <div class="parent-bg"></div>
  </div>
</body>
</html>
z666zz666z
sumber
Ini tidak melakukan apa yang ditanyakan. Itu mengubah perbatasan di sekitar elemen yang melayang. Bukan perbatasan di sekitar elemen anak.
jenniwren
2

Jika Anda menggunakan gaya Twitter Bootstrap dan JS dasar untuk menu tarik turun:

.child{ display:none; }
.parent:hover .child{ display:block; }

Ini adalah bagian yang hilang untuk membuat sticky-dropdown (yang tidak mengganggu)

  • Perilaku tersebut adalah untuk:
    1. Tetap buka saat diklik, tutup ketika mengklik lagi di tempat lain di halaman
    2. Tutup secara otomatis ketika mouse bergulir keluar dari elemen menu.
R Tobin
sumber
2

Tidak yakin apakah ada alasan mengerikan untuk melakukan ini atau tidak, tetapi tampaknya bekerja dengan saya di versi terbaru Chrome / Firefox tanpa masalah kinerja yang terlihat dengan banyak elemen pada halaman.

*:not(:hover)>.parent-hover-show{
    display:none;
}

Tetapi dengan cara ini, yang Anda butuhkan hanyalah menerapkan parent-hover-showke elemen dan sisanya diurus, dan Anda bisa menjaga apa pun jenis tampilan default yang Anda inginkan tanpa selalu "memblokir" atau membuat beberapa kelas untuk setiap jenis.

Brian Leishman
sumber
0

Untuk mengubahnya dari css Anda bahkan tidak perlu mengatur kelas anak

.parent > div:nth-child(1) { display:none; }
.parent:hover > div:nth-child(1) { display: block; }
hamboy75
sumber