HTML
CSS
JavaScript
<div class='box'>Hover over me!</div>
.box { width: 200px; height: 100px; background-color: lightblue; border: 2px solid blue; outline: 5px solid red; outline-offset: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; } .box:hover { outline: 5px solid green; outline-offset: 10px; }
// No JavaScript required for this demo
Hover over me!