1

こんにちは、基本的なdiv ul li a imgを使用してオブジェクト要素をリストし、ホバーオーバーレイ効果を実現しようとしています。特定の画像にカーソルを合わせると、白いテキストキャプションを含む黒いオーバーレイがスライドインするだけです。

これまでのところ、JQuery と CSS のキャプション スライダー機能が最新のブラウザーや以前のバージョンの IE8 でも正しく動作するようになりましたが、キャプションを統合して IE9 で正しく機能させることはできないようです。テキスト キャプション オーバーレイが (意図したとおりに) 部分的に表示されますが、ホバー イベントでスライドしません。

最新のブラウザで正しく動作する JSFiddle の例を次に示します。

http://jsfiddle.net/RossB/THS2J/

誰かが私が見逃しているトリックに光を当てることができますか?

ここに私のHTMLコードのセクションがあります:

<ul>
<div class="featurebox holder">
     <li><img src="images/web_page/pink.jpg" alt="events" /></li>
     <div class="cover featuretext">
        <h3 class="date">Day 24th Month</h3>
        <p>Lorem ipsum dolor sit amet,
        consectetur asipisicing elit, sed do
        eiusmod tempor incididunt...<a href="http://webpage.net/events/" target="_BLANK">Read More></a></p>
      </div>
</div>
</ul>

ここに私が適用しているCSSがあります:

.featurebox h3{ 
        color:#ffffff;
        margin-top:0px; 
        margin-bottom:0px; 
        padding-left:5px; 
        font:11pt;  
        font-weight: bold;  
    }

.featurebox{ 
        color:#ffffff;
        width: 185px; 
        height: 118px;  
        float:left; 
        /*border: solid 2px #8399AF;*/ 
        overflow: hidden;
        position: relative; 
    }


/*caption para text*/               
.featurebox p{ 
        margin-top:0px;
        padding-left: 5px; 
        padding-right:5px; 
    }

/*caption slider */             
.featuretext{ 
        top:99px;
        float: left; 
        position: absolute; 
        background: #000; 
        height: 100px; 
        width: 100%; 
        opacity: .8; 
        /* For IE 5-7 */
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
        /* For IE 8 */
        -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    }



.holder .featuretext {
        top: 220;
        left: 0;
    }

.featurebox p a  {
        float: right;
        color:#FFFF00;
    }

最後に、JQuery:

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.js"></script>
<script type="text/javascript">

$(document).ready(function(){   
//Caption Sliding (Partially Hidden to Visible)
    $('.featurebox.holder').hover(function(){
    $(".cover", this).stop().animate({top:'32px'},{queue:false,duration:160});
    }, function() {
        $(".cover", this).stop().animate({top:'100px'},{queue:false,duration:160});
    });
});
</script>

どんな助けでも大歓迎です。ありがとう

4

0 に答える 0