I was playing with hovers in javascript and have found that they are superior to CSS hovers in a kind of fun way so I thought I'd share.

Say you have a div that changes when you hover over it, like this one:


Here's the code for that that goes where you want the div to appear:
<div id="test1"></div>

And here's the code for that which you will need to have in your style tag:
#test1{width:100px;height:100px;border-style:solid;border-width:1px;background:transparent;} #test1:hover{background:#ff0000;}

You see that there are two ways that it can appear. There's how it is when you hover, and how it is when you don't hover.

This next div uses Javascript to change:


So with Javascript, there are three ways. Before the hover, during the hover, and after the hover, that it can appear. Click this to reset that div and play with it again.

And here's the code:
<div id="test2" style="width:100px;height:100px;border-style:solid;border-width:1px;background:transparent" onmouseover="document.getElementById('test2').style.background='#ff0000';" onmouseout="document.getElementById('test2').style.background='#0000ff';"></div>

And the code that I used to reset it:
<a href="javascript:;" onmousedown="document.getElementById('test2').style.background='transparent';">Reset</a>

And I'll do my best to explain how it works. You can see that there's this sequence: onmouseover="document.getElementById('test2').style.background='#ff0000';" in the code and I'll use it as an example.

onmouseover is an event.
document is the entire webpage.
getElementById is a method.
test2 is the id of the element (in this case, the div) that I want to get.
style is an attribute of the div test2 element.
background is a property of the style attribute.
##ff0000 is a value of the background property

So in the end it reads something like, "when this is moused over, search the document for the element with the Id of "test2" and then find its style attribute and look in there to change the background to #ff0000."

So, you can take this code and change a lot of it out however you want to change different things. You could change things like the size of the div when it's moused over so it grows and shrinks, you can change the border size and pattern, you could make things disappear (but I don't know how you would make it reappear), you could change the font of text when you mouse over it. But a lot of that stuff you can also do with CSS, so I dunno. Be creative you wonderful people! I'm too much of a turd to come up with anything good but if you have an idea you want I'll do my best to help you make it happen.

So far I've mostly been experimenting with using hovering and clicking to change things inside style attributes because a lot of Javascript is about math and functions that I think would be impossible to execute on this site. I'm a little disappointed that the more I look into it the more I'm finding stuff that is useless here, and what is useful here is mostly stuff that could be accomplished with CSS as well. But I'm still trying new things for fun and you should too.

My teacher: W3Schools