Cara Membuat Mouse Over dengan jQuery,dengan cara yang sangat sederhana.Sobat bisa melihat demonya di atas blog ini
Langkahnya adalah sebagai berikut:
1.Login ke Blogger Sobat.
2.Cari Kode: ]]></b:skin>
3.Copy Paste Kode di bawah ini tepat di atas kode:]]></b:skin>
.nav {
list-style: none;
border-bottom: 1px solid #a0a0a0;
padding: 10px 10px 0 10px;
}
.nav li { display: inline; }
.nav li.active a {
position: relative;
z-index: 1;
bottom: -2px;
margin-top: -2px;
background: #005500;
padding-top: 8px;
padding-bottom: 8px;
}
.nav li a {
float: right;
text-decoration: none;
position: relative;
padding: 7px 50px;
margin: 0 0 0 -8px;
color: #fff;
background: #005500;
-webkit-border-top-right-radius: 20px 40px;
-webkit-border-top-left-radius: 20px 40px;
-moz-border-radius-topleft: 20px 40px;
-moz-border-radius-topright: 20px 40px;
-webkit-box-shadow: inset 1px 1px 0 #003300;
-moz-box-shadow: inset 1px 1px 0 #003300;
border: 1px solid #003300;
}
4.Cari kode: </head>
5.Copy Paste Kode di bawah ini tepat di atas kode: </head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">
</script>
6.sobat masukan lagi script di bawah ini tepat di bawah script 1.4.4/jquery.min.js' tadi >
<script>
// DOM Ready
$(function() {
var originalBGplaypen = $("#playpen").css("background-color"),
x, y, xy, bgWebKit, bgMoz,
lightColor = "rgba(255,255,255,0.75)",
gradientSize = 100;
// Basic Demo
$('#playpen').mousemove(function(e) {
x = e.pageX - this.offsetLeft;
y = e.pageY - this.offsetTop;
xy = x + " " + y;
bgWebKit = "-webkit-gradient(radial, " + xy + ", 0, " + xy + ", " + gradientSize + ", from(" + lightColor + "), to(rgba(255,255,255,0.0))), " + originalBGplaypen;
bgMoz = "-moz-radial-gradient(" + x + "px " + y + "px 45deg, circle, " + lightColor + " 0%, " + originalBGplaypen + " " + gradientSize + "px)";
$(this)
.css({ background: bgWebKit })
.css({ background: bgMoz });
}).mouseleave(function() {
$(this).css({ background: originalBGplaypen });
});
var originalBG = $(".nav a").css("background-color");
$('.nav li:not(".active") a')
.mousemove(function(e) {
x = e.pageX - this.offsetLeft;
y = e.pageY - this.offsetTop;
xy = x + " " + y;
bgWebKit = "-webkit-gradient(radial, " + xy + ", 0, " + xy + ", 100, from(rgba(255,255,255,0.8)), to(rgba(255,255,255,0.0))), " + originalBG;
bgMoz = "-moz-radial-gradient(" + x + "px " + y + "px 45deg, circle, " + lightColor + " 0%, " + originalBG + " " + gradientSize + "px)";
$(this)
.css({ background: bgWebKit })
.css({ background: bgMoz });
}).mouseleave(function() {
$(this).css({ background: originalBG });
});
});
</script>
7.Dan cari kode <body> lalu masukan kode di bawah ini tersebut tepat di bawah tag <body>
<ul class="nav clearfix"><li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">free</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
Semoga bermanfaat..
Tidak ada komentar:
Posting Komentar