de-vraag
Lebih
Question

CSS: Saat hover menampilkan dan menyembunyikan div's yang berbeda pada saat yang sama?

Berikut adalah contoh CSS bagaimana menampilkan div tersembunyi (saat hover):

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

dan

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

Dapatkah saya menampilkan satu div dan menyembunyikan div yang lain pada saat yang sama dengan menggunakan hanya CSS? Berikut ini contoh bagaimana menggunakan JS untuk tujuan ini:

Pemrograman
css3
css
Solution / Answer

Berikut ini adalah kodenya

 .showme{ 
   display: none;
 }
 .showhim:hover .showme{
   display : block;
 }
 .showhim:hover .ok{
   display : none;
 }
 <div class="showhim">
     HOVER ME
     <div class="showme">hai</div>
     <div class="ok">ok</div>
</div>
SherloxFR
SherloxFR
Jawaban edit 16 Januari 2017 в 12:06
92

jika div lainnya adalah saudara kandung/anak, atau kombinasi dari, dari orang tua ya

    .showme{ 
        display: none;
    }
    .showhim:hover .showme{
        display : block;
    }
    .showhim:hover .hideme{
        display : none;
    }
    .showhim:hover ~ .hideme2{ //~ sibling selector
        display:none;
    }
    <div class="showhim">
        HOVER ME
        <div class="showme">hai</div> 
        <div class="hideme">bye</div>
    </div>
    <div class="hideme2">bye bye</div>
JIBIN BJ
JIBIN BJ
Jawaban edit 2 Januari 2017 в 7:04
11

Sudahkah Anda mencoba sesuatu seperti ini?

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

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

Saya tidak tahu alasan mengapa hal itu tidak mungkin dilakukan.

1
Related communities 3
HTML dan CSS Indonesia
4 118 pengguna
Silahkan bertanya terkait mengenai HTML maupun CSS. Membaca, menulis, berbagi. Baca dahulu pesan tersemat di pinned post.
Pemrograman Web Indonesia (HTML CSS Javascript PHP MySQL)
306 pengguna
Official Website : www.pemweb.id Belajar Pemrograman Web (HTML CSS Javascript PHP MySQL) Grup Belajar Pemrograman Web. HTML + PHP + Javascript + MySQL DB Semoga menjadi forum belajar, menambah wawasan, peningkatan mutu personal kita semua.
Css Indonesia
19 pengguna
Css Indonesia group ini membahas tentang Css dan web design Bagi yg mau memperdalam Css atau ingin memulai Css atau bahkan Javascript dan html, bisa download aplikasi di bawah ini : https://play.google.com/store/apps/details?id=com.sololearn Thank you