페이지 새로고침 직후 :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>
답변을 작성하시기 전에 로그인 해주세요.