Edit in JSFiddle

.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>