Code Tutorial | CSS Hover

Code Tutorial | CSS Hover | Belajar Efek Hover | Mengenal Hover pada Template Blog | Blogger / Blogspot. Entri ni adalah kesinambungan untuk CSS Hover..sebab entri yang mula2 tu bukan la tutorial..itu cuma pengenalan dalam entri ni baru la ada tutorial. Css hover pada template biasanya anda akan jumpa cuma
a:hover {color:#0f0;}
yang tu untuk link..warna link akan berubah bila anda letak mouse pada link tu..CSS hover tidak terbatas pada link saja..terpulang pada template designer atau tuan blog jika mahu main efek hover ni..
sebagai contoh pada template..ada yang sama,ada yang berbeda..
#main-wrapper {background:#ff3366;color:#151515;}
di atas tu contoh css untuk main wrapper yang mana warna background pada main wrapper tu colour pink manakala tulisan berwarna kelabu gelap.. untuk membuat efek hover masukkan code seperti di bawah..
#main-wrapper:hover {background:#ff0;color:#000;}
bila mouse diletakkan pada main-wrapper..background akan berubah seperti yang disetkan pada code css di atas..
nampak kan cara guna efek hover tu…
Contoh lagi
#sidebar-wrapper a:link {color:#3366ff;}
tambah code hover
#sidebar-wrapper:hover a:link {color:#0f0;}
jika anda letak mouse pada area sidebar.. link akan bertukar warna dari warna biru(#3366ff) ke warna hijau{#0f0)

berikut adalah code css juga :
#main-wrapper:hover {background:#000;color:#ff0000;}(code ni buat main wrapper jadi warna hitam dan tulisan jadi warna merah)
#sidebar-wrapper:hover a:link {color:#0f0;font-weight:bold;font-size:36px;}
(code ni buat setiap link pada sidebar bertukar jadi warna hijau dan tulisan link tu bersaiz 36px..besar tu..)
.sidebar .widget {border:5px dashed #3366ff;}
ini bukan efek hover…ni efek membuatkan widget tu ada border kaler biru dengan border putus2
.sidebar .widget:hover{border:5px solid #0f0;}
efek hover ni untuk widget pada sidebar..bila letak mouse pada sidebar.. border jadik kaler hijau dan border jadi bersambung…
boleh faham?..efek tu terpulang dari anda…mau masukkan efek apa..makin dalam pengetahuan anda tentang css…makin kaw2 la efek yang boleh anda masukkan… pengetahuan aku pasal code css ni cuma asas saja…sebab tu efek hover ni biasa saja…heheehe…

Artikel tentang Code Tutorial | CSS Hover