css 질문
본문
크롬기준입니다
#div {width: 200px;height: 200px;background: red;opacity: 0;transition: 1s}
#div:hover {opacity: 1}
<div id="div"></div>
위처럼 마크업시 #div에 마우스를 올리면 #div가 서서히 보이고 떠나면 서서히 사라집니다.
그런데 페이지를 방문하거나 새로고침시에 마우스를 hover 하지 않아도 빨간상자가 보였다가 서서히 사라집니다. 어찌보면 당연한 동작이겠지만.. 제가원하는건 아닙니다
눈치채셨겠지만 hover하면 서서히 나타나고 떠나면 서서히 사라지는 기능은 유지하면서 새로고침하여도 아에 안보였으면 합니다. 도움부탁드립니다
답변 1
#div {
opacity: 0;
}
#div:hover {
opacity:1;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
이렇게하면 마우스가 떠나면 서서히 사라지지 않고 바로사라집니다.
답변을 작성하시기 전에 로그인 해주세요.