.box { width: 100px; height: 100px; margin: 5px; background: gray; transition: background 0s 9999s; } .hoverer { width: 100px; height: 40px; border: solid 1px blue; margin: 5px; } .hoverer:hover + .box { background: red; transition: background 0s; }
<p> When you hover first rectangle, the box will change its color from gray to red. And when you remove your mouse from first rectangle - the box will keep its red color (instead of changing it back to gray). </p> <div class="hoverer">Hover me!</div> <div class="box"></div>