larsbergstrom/Instructions

## Instructions
Implement the `mouseover` event in Servo.

Description:
https://developer.mozilla.org/en-US/docs/Web/Events/mouseover

Copy the HTML below locally and run it:
./mach run -d test.html

Notice that mousing over the second div does not change its background color in Servo!

The appropriate code is in components/script/dom/document.rs, line 702, where we set the hover state.

TASK: Add "mouseover" code! Search down for the "mousemove" MouseEvent::new code for example code that almost works...
(Note: This is Issue https://github.com/servo/servo/issues/6404)

Extra exercise:
The timer from this script code is implemented in components/script/horribly_inefficient_timers.rs, which creates a thread per timer created! How could you make it less horribly inefficient?

## test.html
<html>
  <head>
    <style>
    .sized {
      height: 50px;
      width: 50px;
    }
  </style>
 </head>
  <body>
    <div class="sized"> first </div>
    <div class="sized" id="test"> second </div>
    <div class="sized"> third </div>

<script>
var test = document.getElementById("test");

// this handler will be executed every time the cursor is moved over a different list item
test.addEventListener("mouseover", function( event ) {
// highlight the mouseover target
event.target.style.background = "orange";

// reset the color after a short delay
setTimeout(function() {
event.target.style.background = "";
}, 500);
}, false);
</script>

  </body>
</html>
	Implement the `mouseover` event in Servo.

	Description:
	https://developer.mozilla.org/en-US/docs/Web/Events/mouseover

	Copy the HTML below locally and run it:
	./mach run -d test.html

	Notice that mousing over the second div does not change its background color in Servo!

	The appropriate code is in components/script/dom/document.rs, line 702, where we set the hover state.

	TASK: Add "mouseover" code! Search down for the "mousemove" MouseEvent::new code for example code that almost works...
	(Note: This is Issue https://github.com/servo/servo/issues/6404)

	Extra exercise:
	The timer from this script code is implemented in components/script/horribly_inefficient_timers.rs, which creates a thread per timer created! How could you make it less horribly inefficient?
	<html>
	<head>
	<style>
	.sized {
	height: 50px;
	width: 50px;
	}
	</style>
	</head>
	<body>
	<div class="sized"> first </div>
	<div class="sized" id="test"> second </div>
	<div class="sized"> third </div>

	<script>
	var test = document.getElementById("test");

	// this handler will be executed every time the cursor is moved over a different list item
	test.addEventListener("mouseover", function( event ) {
	// highlight the mouseover target
	event.target.style.background = "orange";

	// reset the color after a short delay
	setTimeout(function() {
	event.target.style.background = "";
	}, 500);
	}, false);
	</script>

	</body>
	</html>