<!DOCTYPE html>
<body>
<a href="http://www.test.com" style="position: absolute; left: 20px; top: 20px; width: 200px;">A link to highlight</a>
<div style="background-color: white; position: absolute; left: 20px; top: 40px; width: 200px; height: 30px; transform:translateZ(0);">
<p id="innerDiv">Not a link to click.</p>
</div>
<div style="background-color: white; position: absolute; left: 20px; top: 100px; width: 200px; height: 100px; overflow-y: scroll; overflow-x : scroll;">
<a href="http://www.test.com">Another link to click</a><br>
Some stuff.<br>
Some stuff.<br>
Some stuff.<br>
Some stuff.<br>
Some stuff.<br>
Some stuff.<br>
Some stuff.<br>
Some stuff.<br>
Some stuff.<br>
Some stuff.<br>
Some stuff.<br>
Some stuff.<br>
Some stuff.<br>
Some stuff.<br>
Some stuff.<br>
Some stuff.<br>
Some stuff.<br>
</div>
<!-- Don't highlight if no hand cursor. -->
<a href="http://www.test.com" style="position: absolute; left: 20px; top: 220px; width: 200px; cursor: crosshair;">A link to *not* highlight</a>
<div style="position: absolute; left: 20px; top: 260px; width: 200px;">
<input type="text"> <!-- This will have an I-beam cursor. -->
</div>
<style>
#multicol { position: absolute; left: 20px; top: 300px; width: 400px; height: 50px; columns: 2; column-fill: auto; }
</style>
<div id="multicol">
<a href="http://www.test.com">
<div style="display: inline-block; width: 200px; height: 25px">Link part 1</div>
<div style="display: inline-block; width: 200px; height: 25px">Link part 2</div>
<div style="display: inline-block; width: 200px; height: 25px">Link part 3</div>
</a>
</div>
<div style="position: absolute; left: 20px; top: 400px">
<div id="display-contents" style="display: contents; cursor: pointer">Contents</div>
<div>
</body>
</html>
Codebase Browser
chromium