Cara Membuat Efek Hover Dengan AngularJs

Efek Hover adalah suatu animasi yang diberikan terhadap suatu objek atau elemen yang akan muncul ketika kita arahkan mouse terhadap elemen tersebut. Dan kali ini saya akan membahas tentang Cara Membuat Efek Hover Dengan AngularJs.

Dalam kasus ini saya tidak akan membuat dengan menggunakan modul atau controller. Jadi untuk Cara Membuat Efek Hover Dengan AngularJs saya akan bermain di direktif angularjs dan class yang nanti akan saya buat di cssnya.

Langkah pertama saya akan buat struktur htmlnya terlebih dahulu seperti script di bawah ini.

<!DOCTYPE html>
<html ng-App>
<head>
<title>Cara Membuat Efek Hover Dengan AngularJs</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
	<button ng-mouseover="myValue = true" ng-mouseleave="myValue = false" class="hover-{{myValue}}">Hover Me !</button>
	<p>Hover : {{myValue}}</p>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Cara Membuat Efek Hover Dengan AngularJs</title>

</head>

<body>

<button ng-mouseover="myValue = true" ng-mouseleave="myValue = false" class="hover-{{myValue}}">Hover Me !</button>

<p>Hover : {{myValue}}</p>

</body>

</html>

Disini teman-teman bisa perhatikan scriptnya. Hal pertama yang harus diperhatikan adalah mencantumkan link angularjs yang teman-teman bisa dapatkan di website resmi dari angularjs. Dan kedua saya aktifkan angularjs dengan direktif ng-App tanpa ada parameter. KemudianÂ di tag body saya buat satu tombol untuk saya arahkan dengan kursornya mouse dan di dalamnya saya berikan direktif event dari angularjs yaitu ada ng-mouseover dengan variable myValue bernilai true berfungsi untuk membaca ketika kursor mouse sedang berada di atas tombol dan ada juga ng-mouseleave dengan variable myValue bernilai false yang berarti akan bernilai false ketika kursor mouse meninggalkan tombol. Untuk menjalankan efek hover pada tombol saya gunakan class dengan nama hover- disambung dengan nilai myValue. Langkah selanjunya kita akan membuat style dari tombolnya ketika di hover dan tidak. Berikut adalah script cssnya.

<style type="text/css">
	button{
		padding: 10px;
		border:none;
		border:2px solid green;
		background: green;
		color:white;
		border-radius: 7px;
	}
	.hover-true{
		background: white;
		color:black;
	}
</style>

button{

padding: 10px;

border:none;

border:2px solid green;

background: green;

color:white;

border-radius: 7px;

}

.hover-true{

background: white;

color:black;

}

</style>

Oke disini ketika myValue yang berada di tombol bernilai false maka css dengan selector button saja akan di jalankan. Dan ketika myValue yang ada di tombol bernilai true maka css dengan selector nama .hover-true juga akan dijalankan.

Jika teman-teman buka di browser masing-masing maka tampilan tombol saat diarahkan kursor mouse akan seperti pada gambar di bawah ini.

Demikian artikel tentang Cara Membuat Efek Hover Dengan AngularJs. Semoga dapat bermanfaat dan selamat mencoba.

Facebook DUMET School

Categories