Membuat Efek Hover Background tag UL Menggunakan CSS

Membuat Efek Hover Background tag UL Menggunakan CSS - Daftar CSS3 ul nya menunjukkan menghidupkan properti lebar minimum elemen yang untuk menciptakan efek latar belakang merenggang dengan CSS3.
Di sini kita menggunakan teknik ini untuk menambahkan efek Hover ke daftar UL, sehingga pengguna dapat dengan mudah menavigasi dalam pada item daftar tertentu hanya dengan mengarahkan mouse di atasnya.

Daftar animasi UL menggunakan CSS3, yang bekerja dengan mozilla Firefox, google Chrome, IE10 +, Safari dan browser.

Demo

Copy Kode Berikut : 

Pergi Ke > Edit Template > Tekan Ctrl + F dan mencari [[> </ b: skin>

dan paste kode dibawah ini di atas kode [[> </ b: skin>

.post ul{
 margin: 0;
 padding: 0;
 list-style: none;
}
.post ul li{
 width: 100%;
 clear:left;
 overflow: hidden;
}
.post ul li:hover{
 color: #fff;
 background: #ce3e3e;
 border-left: 8px solid darkred;
 min-width: 450px;
 -webkit-box-shadow: 0 0 5px gray;
 -moz-box-shadow: 0 0 5px gray;
 box-shadow: 0 0 5px gray;
 -webkit-transition: all 0.3s ease-out;
 -moz-transition: all 0.3s ease-out;
 -o-transition: all 0.3s ease-out;
 transition: all 0.3s ease-out;
}

Lalu Simpan Template Anda.

Pergi ke Post dan menambahkan daftar ul li untuk mengirim bagian .

Kode HML :

<ul>
<li>List Test 1</li>
<li>List Test 2</li>
<li>List Test 3</li>
<li>List Test 4</li>
</ul>

Catatan :

• Untuk mengubah warna teks Ganti kode berwarna.
• Ganti warna perubahan warna latar belakang.
• Untuk mengubah warna sideborder ganti kode berwarna.
• Ganti berwarna untuk mengubah lebar.

Sekian dulu Artikel tentang Membuat Efek Hover Background tag UL Menggunakan CSS  semoga artikel di atas dapat membantu anda, dan bermanfaat bagi anda.

Share this post