облегчение после ролловера разъединенного изображения

У меня есть несвязанный ролловер, и я хотел бы добавить эффект временного затухания (только). Я создал страницу с изолированной конкретной проблемой, см. здесь:

При наведении курсора на «обзор» в определенной области появляется изображение обзора, а при развертывании изображение исчезает. Все хорошо, но теперь я хотел бы, чтобы изображение исчезало через полсекунды, даже если указатель все еще зависает над «обзором» (а не только тогда, когда указатель отсутствует). Другими словами, каждый раз, когда посетитель наводит курсор на «обзор», изображение появляется на полсекунды, а затем исчезает. Я новичок. Только CSS было бы здорово. Я пробовал webkit easy-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;}

css rollover fade
person rapha    schedule 19.09.2012    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Возможно, вы можете использовать анимацию 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 и имейте в виду, что это работает только в современных браузерах.

Надеюсь, это поможет!

person Christofer Vilander    schedule 19.09.2012
comment
Спасибо, Кристофер! Ценить это! Работает префект. Единственное, что пока не работает, это затухание при развертывании. Я хотел, чтобы развертывание имело такой же (слегка отсроченный) эффект затухания. Сейчас он просто сразу исчезает. - person rapha; 21.09.2012