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

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

QA

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

본문

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

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

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

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

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

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

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

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

고수님들 도와주세요.


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

이 질문에 댓글 쓰기 :

답변 1

답변을 작성하시기 전에 로그인 해주세요.
전체 126,853 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT