Code Tutorial | CSS Hover 2nd

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 tapi ... ini hanyalah part2...ada lagi part seterusnya... kalau aku tulis semua dalam 1 part terlalu panjang...otai blogger pesan jangan buat entri telalu panjang....hehe.. aku folow ja...

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 berbeza..

#main-wrapper {background:#ff3366;color:#151515;}

di atas tu contoh css untuk main wrapper yang mana kaler background pada main wrapper tu kaler 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)

live demo aku telah sediakan dalam entri ni...cuba letak mouse pada sidebar..pada main wrapper pun aku setkan warna background kaler hitam jika anda letak mouse pada main wrapper...widget pada sidebar pun ada efek hover...cuba letak mouse pada mana2 widget di sidebar tu..

berikut adalah code css yang aku letak pada entri ni

#main-wrapper:hover {background:#000;color:#ff0000;}(code ni buat main wrapper jadi kaler hitam dan tulisan jadi kaler 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 jadik 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...

Rasanya cukup sampai sini saja... pada entri yang seterusnya ialah efek hover untuk gambar....('',)

SEKIAN