<!DOCTYPE html>
<style>
#t { width: 400px; height: 400px; }
#t::first-letter { background-color: red; }
#t:hover::first-letter { background-color: green; }
</style>
<div id="t">
<div>
<p>X</p>
<p>The X above should have a green background when hovered.</p>
</div>
</div>
<script>
document.body.offsetTop; // Force layout. The mouse is not tracked before first layout.
if (window.eventSender)
eventSender.mouseMoveTo(100, 100); // Hover.
document.body.offsetTop; // Update layout for the hovered state.
</script>