Cara Membuat Efek Hover Mengubah Warna

21/08/2018    Risman Hakim    1479     Website

Cara Membuat Efek Hover Mengubah Warna - Siapa yang tidak kenal dengan efek hover pada CSS ? ya, efek hover sudah tidak asing lagi didengar bahkan mungkin setiap kali mendesain sebuah tampilan website efek ini akan ada pada baris program, tentunya menyesuaikan dengan kebutuhan juga yah.. Namun tidak bisa dipungkiri efek hover ini sangat menarik apalagi buat kalian yang sedang mencoba dan belajar CSS, karena dengan menggunakan hover kita bisa manipulasi dan juga menambahkan efek sederhana lainnya pada sebuah elemen. Nah, Kali ini saya akan bagikan tutorial sederhana yang lumayan menarik dan patut kalian coba yaitu Cara Membuat Efek Hover Mengubah Warna. Penasaran seperti apa cara membuatnya, langsung saja simak langkah - langkahnya berikut ini.

Langkah 1 : Cara Membuat Efek Hover Mengubah Warna

Seperti pada judul diatas, kita akan membuat efek hover pada suatu elemen untuk mengubah warna, dalam hal ini warna yang akan diubah adalah warna background body. Untuk membuat elemen sebagai objek yang akan dijadikan hovernya kita akan membuat struktur HTML sederhana terlebih dahulu seperti berikut.

<body>
    <ul class="nav">
      <li><a href="#" class="first">c</a></li>
      <li><a href="#">o</a></li>
      <li><a href="#">l</a></li>
      <li><a href="#">o</a></li>
      <li><a href="#" class="last">r</a></li>
      <li class="bg-body"></li>
    </ul>
</body>

Langkah 2 : Cara Membuat Efek Hover Mengubah Warna

Langkah selanjutnya adalah kita akan mendesain tampilan elemen yang telah kita buat diatas dan juga efek hovernya yang paling utama. Nah, silahkan kalian ketikan sintak CSS berikut untuk membuat efek hovernya.

* {    
    margin: 0;
    padding: 0;
 }

body {background:#e5e5e5;}

.bg-body {
    position: fixed;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition: .25s;
    pointer-events: none;
}

li {list-style:none;}

li a {
    display: block;
    float: left;
    width: 20%;
    padding: 25px 0;
    text-align: center;
    font-weight: bold;
    font-size: 35px;
    color: #e5e5e5;
    text-decoration: none;
    text-transform: uppercase;
    transition:.25s;
}

.nav {  
    width:500px;
    margin:60px auto 0 auto;
}

.first { border-radius: 50% 0 0 50%; }
.last  { border-radius: 0 50% 50% 0; }
      
li:nth-child(1) a { background:#3CB5B5; }
li:nth-child(2) a { background:#FCD920; }
li:nth-child(3) a { background:#E53B51; }
li:nth-child(4) a { background:#EC6C20; }
li:nth-child(5) a { background:#92AE01; }

li:nth-child(1):hover ~ .bg-body { background: #3CB5B5; }
li:nth-child(2):hover ~ .bg-body { background: #FCD920; }
li:nth-child(3):hover ~ .bg-body { background: #E53B51; }
li:nth-child(4):hover ~ .bg-body { background: #EC6C20; }
li:nth-child(5):hover ~ .bg-body { background: #92AE01; }

Setelah semua sintak diatas telah kalian ketikan, silahkan simpan filenya kemudian buka pada browser masing - masing untuk melihat hasil akhirnya. Maka hasilnya akan terlihat seperti pada gambar berikut, jika kalian arahkan kursor pada elemen warna akan terjadi perubahan warna pada background body nya.

Bagaiamana, menarik bukan ? Baik, cukup sekian tutorial sederhana bagaimana Cara Membuat Efek Hover Mengubah Warna, semoga bermanfaat dan bisa membantu. Selamat mencoba :)

Web Design, HTML CSS, website

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More