테스트 사이트 - 개발 중인 베타 버전입니다

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

달빛속으로 1년 전 조회 981

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

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

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

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

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

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

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

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

고수님들 도와주세요.

</strong></p>

<p><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></p>

<p><strong>

댓글을 작성하려면 로그인이 필요합니다.

답변 1개

채택된 답변
+20 포인트
1년 전

브라우저 동작이니 :hover 는 안되고, js 이벤트로 기억시키게 직접 작성해야 합니다.  

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인