| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>hover effect on a link in the 2nd region</title> |
| <style type="text/css"> |
| .content { |
| font-size: 20px; |
| } |
| .content a:hover { |
| color:Red; |
| } |
| #region { |
| width: 100px; |
| height: 100px; |
| background-color: rgb(241, 241, 241); |
| border: solid 1px #888; |
| margin: 10px; |
| } |
| </style> |
| <script type="text/javascript"> |
| function myOnLoad() { |
| if(!window.testRunner) |
| return; |
| |
| var element = document.querySelector('.content a'); |
| var box = element.getBoundingClientRect(); |
| var X = (box.right + box.left) / 2; |
| var Y = (box.top + box.bottom) / 2; |
| |
| eventSender.mouseMoveTo(X, Y); |
| } |
| </script> |
| </head> |
| <body onload="myOnLoad();"> |
| <div id="region"><div class="content">1xxxxx<br>2xxxxx<br>3xxxxx<br>4xxxxx</div></div> |
| <div id="region"><div class="content">5xxxxx<br>6xxxxx<br><a href="#">7xx</a>xxx<br>8xxxxx</div></div> |
| <div id="region"><div class="content">9xxxxx<br>10xxxxx<br>11xxxxx</div></div> |
| <div>hover effect on a link in the 2nd region</div> |
| </body> |
| </html> |
