Hover effects can make your site more alive and interactive. User will give more attention to the element that has hover effects since it is very fancy to look at the element performs some dynamic change when your cursor in the top of it.
In this tutorial we’re gonna show you how to add hover effects in your HTML elements using 3 different ways.
1. Hover Effects CSS Way
It used to be JavaScript that was required to do really interesting effects but these days CSS has come and capable of doing a ton of cool stuff. To add hover effects in your Html elements, simply use :hover in corresponding elements in our CSS file.
Let’s say we have first class in our Html elements.
|
1 2 3 4 5 |
<div id="container"> <img class="first" title="temple" src="candi.jpg"/> <img class="second" title="Pugar" src="pugar.jpg"/> <img class="third" title="Friends"src="bareng.jpg"/> </div> |
All we need to do in our Css styling is
|
1 2 3 4 5 6 |
.first:hover{ -webkit-transform: scale(1.25); -moz-transform: scale(1.25); position: relative; z-index: 5; } |
2. Jquery Way : hover() method
The hover() method needs two functions to run when the mouse pointer hovers over the selected elements.
This method triggers both the mouseenter and mouseleave events.
If only one function is specified, it will be run for both the mouseenter and mouseleave events.
Let’s add hover in our next Html elements, second class
|
1 2 3 4 5 |
<div id="container"> <img alt="hover effects" class="first" title="temple" src="candi.jpg"/> <img class="second" title="Pugar" src="pugar.jpg"/> <img class="third" title="Friends"src="bareng.jpg"/> </div> |
In the head of Html we need to specify what method will be used to give a hover effects.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script type="text/javascript"> $(document).ready(function(){ $(".second").hover(function(){ $(this).css("background","yellow"); },function(){ $(this).css("background",""); }); }); </script> |
3. Jquery Way : mouseover and mouseout events
Although Jquery provides us hover() method. Sometime it can be a trouble when we dynamically add elements during running time. The dynamically added elements will not have hover effects not like other elements that are created in design code (we will explain it later in the upcoming tutorials).
Here we use mouseover and mouseout events that are triggered inside on() method.
Once more we add hover effects in our html elements.
|
1 2 3 4 5 |
<div id="container"> <img alt="hover effects" class="first" title="temple" src="candi.jpg"/> <img class="second" title="Pugar" src="pugar.jpg"/> <img class="third" title="Friends"src="bareng.jpg"/> </div> |
And here’s our on method
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script type="text/javascript" > $(document).ready(function(){ $(".second").hover(function(){ $(this).css("background","yellow"); },function(){ $(this).css("background",""); }); $(".third").on("mouseover",function(){ $(this).addClass("hover"); }); $(".third").on("mouseout",function(){ $(this).removeClass("hover"); }); }); </script> |
4. Full Code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
<html> <head> <style type="text/css"> body{ margin:0px; background: #8896FC; } #container{ padding:50px; } img { display: block; background:#FFFFFF; padding:10px 10px 40px 10px; } img:hover{ } .first{ float:left; } .first:hover{ -webkit-transform: scale(1.25); -moz-transform: scale(1.25); position: relative; z-index: 5; } .second{ float:left; margin-left:20px; margin-right: 20px; } .third{ } .hover{ transform:rotate(-7deg); -ms-transform:rotate(-7deg); /* IE 9 */ -moz-transform:rotate(-7deg); /* Firefox */ -webkit-transform:rotate(-7deg); /* Safari and Chrome */ -o-transform:rotate(-7deg); /* Opera */ } </style> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $(".second").hover(function(){ $(this).css("background","yellow"); },function(){ $(this).css("background",""); }); $(".third").on("mouseover",function(){ $(this).addClass("hover"); }); $(".third").on("mouseout",function(){ $(this).removeClass("hover"); }); }); </script> </head> <body> <div id="container"> <img class="first" title="Temple" src="candi.jpg"/> <img class="second" title="Pugar" src="pugar.jpg"/> <img class="third" title="Friends"src="bareng.jpg"/> </div> </body> <html> |
5. Demo
As usual, you can try the live demo
cara instal oracle java di ubuntu gimana gan? pusing ane
gampang gan
besok ketemu saya saja hhehe