div {
border: 1px solid black;
padding: 5px;
margin: 5px 10px;
background-color: pink;
}
.ex1:hover {outline-color: invert;}
.ex2:hover {outline-color: blue;}
.ex3:hover {outline-color: rgba(255,0,0,0.5);}
div:hover {
outline-offset : 5px;
outline-style: solid;
outline-width: 10px;
}
<!DOCTYPE html>
<html lang="ko">
<head></head>
<body>
<p>요소에 마우스를 올리세요</p>
<div class="ex1">outline-color: invert;</div>
<div class="ex2">outline-color: blue;</div>
<div class="ex3">outline-color: rgba(255,0,0,0.5);</div>
</body>
</html>