페이지 새로고침 직후 :hover가 적용되지 않습니다.

페이지 새로고침 직후 :hover가 적용되지 않습니다. 채택완료

페이지 상단에 msgBox라는 div 엘리먼트가 있습니다

마우스를 올리면 hover효과로 붉은색이 됩니다.

그 상태에서 f5를 눌러서 새로고침을 하면 hover효과가 풀리고 하얀색이 됩니다.

마우스 움직이거나 클릭하면 다시 hover효과가 적용돼서 붉은색이 됩니다.

--------------------------------------------------------------------

새로고침했을때 마우스를 움직이거나 클릭하지 않아도 마우스 포인트가 msgBox div안에 있으면 hover효과가 적용됐으면 합니다.

--------------------------------------------------------------------

열심히 찾아봐도 뭘로 검색해야 할지도 모르겠고 최대한 찾아봐도 안보이더라고요..

고수님들 도와주세요.

Copy

<html lang="ko">
 
<head>
  <style>
    div.messageBox {
      position: relative;
      margin-left: 10px;
      margin-right: 10px;
      z-index: 2100;
      height: 47px;
      border: 2px solid rgba(32, 36, 40, .1);
      background-color: hsla(0, 0%, 100%, .7);
      text-align: center;
      vertical-align: middle;
      opacity: 1;
      border-radius: 5px;
    }
 
    div.messageBox:hover {
      pointer-events: auto;
      font-weight: bold;
      color: rgb(1, 1, 1);
      background-color: rgba(255, 100, 100, 0.7);
      opacity: 1;
    }
  </style>
</head>
 
<body>
  <div class="messageBox" id="msgBox">HOVER</div>
</body>
 
</html>

페이지 새로고침 직후 :hover가 적용되지 않습니다. 채택완료

답변 1개

공유하기