CODEWITHSUNDEEP
hovermouse
rsarellano
rsarellano

Reputation: 79

mouse hover effect using javascript

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.

Upvotes: 2

Views: 32776

Answers (2)

Brewal
Brewal

Reputation: 8189

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/

Upvotes: 3

Ihsan Fajari
Ihsan Fajari

Reputation: 11

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>

Upvotes: 1

Related Questions