I'm practicing event handlers but I cant seem to figure out how to make similar mouseHover effect using javascript on the website of lol.garena.ph (home,news,guides etc. The nav buttons). Help me out please.
3
-
just the changing color when mouseHover but I don't know how to make it elevate just like on the lol.garena.phrsarellano– rsarellano2013-06-20 08:25:37 +00:00Commented Jun 20, 2013 at 8:25
-
Combine css and javascript. Make an "hover" css class and add the class on mouse over with javascript.Brewal– Brewal2013-06-20 08:26:34 +00:00Commented Jun 20, 2013 at 8:26
-
yes that's exactly how I think it would work but my problem is what exactly do I put to the my javascript code to make it elevate, what sort of function.rsarellano– rsarellano2013-06-20 08:29:00 +00:00Commented Jun 20, 2013 at 8:29
Add a comment
|
2 Answers
Basically, you will have to make an .hover class :
.hover {
position: relative;
top: -5px; /* this will raise the element */
}
Then add the class to your element (with id el) with javascript :
<li onmouseover="this.className='hover';" onmouseout="this.className='';">Home</li>
Of course, this is just the principle. See a working example : http://jsfiddle.net/KbcPb/
But you could do it just with css : http://jsfiddle.net/42jLY/
2 Comments
rsarellano
wow awesome! but how do I seperate the Nav buttons so that there will space between them? I tried doing <table width="120" border="0" cellspacing="10" cellpadding="10"> <tr> <th height="74" scope="col"><li onmouseover="this.className='hover';" onmouseout="this.className='';"></th> to seperate them but when I hover the Nav it elevates but puhes down the bottom part of the site.
Brewal
margin-right: 5px;... You should learn a bit more CSS by your own :)I'm using this for my task. It'll make it look like a CSS hover effect.
in the HTML code :
<h1 id="titleRegister" onmouseover="changeToBlueColor()" onmouseout="changeToBlackColor()"> Register </h1>
and for the function in javascript :
<script>
function changeToBlueColor(){
document.getElementById("titleRegister").style.color = "blue";
}
function changeToBlackColor(){
document.getElementById("titleRegister").style.color = "black";
}
</script>
