롤오버 분해 후 이미지 제거

롤오버가 분리되어 있으며 시간 초과 완화 (전용) 효과를 추가하고 싶습니다. I made a page with just that particular issue isolated, see here:롤오버 분해 후 이미지 제거

"개요"위로 마우스를 가져 가면 오버뷰 이미지가 정의 된 영역에 나타나고 롤아웃시 이미지가 사라집니다. 포인터가 꺼져있을 때만이 아니라 포인터가 여전히 "개요"위로 움직여도 0.5 초 후에 이미지가 페이드 아웃됩니다. 다른 말로하면 방문자가 "개요"를 가리킬 때마다 이미지가 0.5 초 동안 표시된 다음 사라집니다. 나는 초보자입니다. CSS 만 좋을 것입니다. webkit ease-out/ease-in을 시도했지만 실제로 보여줄 수는 없었습니다.

코드 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>raphaelzwyer</title> 
<link href="css/raphaelzwyer.css" type="text/css" media="screen" title="raphaelzwyer stylesheet" rel="stylesheet" charset="utf-8"/> 
<script type="text/javascript" src="js/raphaelzwyerFive.js"></script> 
</head> 

<body> 

<div id="header"> 
        <ul id="overviewlayer"> 
         <li> 
          <a href="portfolio.html"> 
           <div id="overviewtext">overview</div> 
           <div class="overview"><img src="images/overview.png" width="660" height="1284" alt="overviewlayer"/></div> 
          </a> 
         </li> 
         <li id="wordmark"></li> 
        </ul> <!-- end of overviewlayer --> 
    </div> <!-- end of header --> 

</body> 
</html>

관련 CSS :

#header { 
     position: relative; 
     top: 36px; 
     left: 212px; 
     width: 660px; 
     height: 48px;} 
#overviewlayer a .overview { 
     display:none;} 
#overviewlayer a:hover .overview { 
     display: block; 
     position: absolute; 
     top: 116px; 
     left: 0px; 
     height: 852px; 
     width: 660px; 
     padding: 0px; 
     margin: 0px; 
     color: #000; 
     font-size: 11px; 
     background-color: #FFF; 
     z-index: +20;} 
.overview { 
     position: relative; 
     top: 12px; 
     left: 0px; 
     height: 852px; 
     width: 660px; 
     z-index: +10;} 
#overviewtext { 
     position: absolute; 
     top: 0px; 
     width: 100px; 
     height: 48px; 
     padding-top: 4px; 
     border-top-style: solid; 
     border-top-width: 1px; 
     z-index: +600;} 
a { 
     text-decoration: none; 
     color: #a9a9a9;} 
a:hover, a:focus { 
     text-decoration: none; 
     color: #be1f2d;} 
li { 
     list-style-type: none; 
     display: inline;}

출처

2012-09-19 rapha

은 아마 당신이에 대한 CSS3 애니메이션을 사용할 수 있습니다 ...

이 { #overviewlayer a:hover .overview }

에이 코드 줄을 추가

-webkit-animation: fade 1.0s ease-out forwards;

그리고 css에 키 프레임을 추가하십시오.

@-webkit-keyframes fade 

{ 
    0% {opacity: 1;} 
    50% {opacity: 1;} 
    100% {opacity: 0;} 
}

이 경우 '개요'위로 마우스를 가져 가면 이미지가 즉시 나타나서 이미지가 사라집니다.

이 예제에서는 -webkit-을 추가 했으므로 Firefox, IE 및 Opera의 접두사를 추가하는 것을 잊지 말고 최신 브라우저에서만 작동한다는 점을 명심하십시오.

희망 하시겠습니까?

출처

2012-09-19 20:33:29

고맙습니다. 크리스토퍼! 고맙습니다! 감사합니다. 아직 작동하지 않는 유일한 방법은 롤아웃시 페이드 아웃입니다. 나는 롤아웃이 같은 (약간 지연된) 페이드 아웃 효과를 갖기를 원했다. 지금 당장은 즉시 사라집니다. – rapha

롤오버 분해 후 이미지 제거

답변

관련 문제