0

バラバラなロールオーバーがあり、時間制限付きのイーズアウト (のみ) 効果を追加したいと考えています。 その特定の問題だけを分離したページを作成しました。ここを参照してください。

「概要」にカーソルを合わせると、定義された領域に概要画像が表示され、ロールアウトすると画像が消えます。すべて問題ありませんが、ポインタがまだ「概要」の上に置かれている場合でも（ポインタが出ているときだけでなく）、画像が0.5秒後にフェードアウトするようにしたいと思います。つまり、訪問者が「概要」にカーソルを合わせるたびに、画像が 0.5 秒間表示されてからフェードアウトします。私は初心者です。CSSだけでもいいです。Webkitのイーズアウト/イーズインを試しましたが、実際には表示できず、イーズアウトのみでした。

コード：

<!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;}
4

1 に答える 1

0

おそらく、これには 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-19T20:33:29.123 に答える