0

次のjsfiddleがありますが、キャプションが表示されないようです：http: //jsfiddle.net/KumcX/189/

HTML：

<ul>
<li>
    <div class="caption" style="width: 220px; height: 140px; display: block; opacity: 0.0524612;">this is my caption</div>
    <a href="#"><img src="http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367" alt=""></a></li>
    <li>
    <div class="caption" style="width: 220px; height: 140px; display: block; opacity: 0.0524612;">this is my caption</div>
    <a href="#"><img src="http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367" alt=""></a></li>
    <li>
    <div class="caption" style="width: 220px; height: 140px; display: block; opacity: 0.0524612;">this is my caption</div>
    <a href="#"><img src="http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367" alt=""></a></li>
    <li>
    <div class="caption" style="width: 220px; height: 140px; display: block; opacity: 0.0524612;">this is my caption</div>
    <a href="#"><img src="http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367" alt=""></a></li>
    <li>
    <div class="caption" style="width: 220px; height: 140px; display: block; opacity: 0.0524612;">this is my caption</div>
    <a href="#"><img src="http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367" alt=""></a></li>
    <li>
    <div class="caption" style="width: 220px; height: 140px; display: block; opacity: 0.0524612;">this is my caption</div>
    <a href="#"><img src="http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367" alt=""></a></li>
</ul>

CSS：

ul li{ float:left; padding:20px; border:solid gray 4px; margin:5px;}
ul li div{display:none; background:white; opacity:.5; position:absolute;}

JS：

$('ul li').mouseenter(function(){
    var image= $(this).find('a img'),
        caption = $(this).find('div');

    caption.width(image.width());
    caption.height(image.height());
    caption.fadeIn();
}).mouseleave(function(){
     var image= $(this).find('img'),
        caption = $(this).find('div');

    caption.width(image.width());
    caption.height(image.height());
    caption.fadeOut();
});

キャプションが表示されるはずですが、表示されません。何かアイデアはありますか？

4

4 に答える 4

4

あなたはおそらくfirebugでhtmlをコピーします、

li要素のスタイルを削除します。

これをチェックしてください http://jsfiddle.net/kuyabiye/KumcX/194/

于 2012-05-14T15:21:19.870 に答える
2

一部のJSをリファクタリングし、インラインキャプションのスタイルを廃止し、cssクラスを更新しました

jQuery

$(".caption").css('opacity', 0);

$('ul li').mouseenter(function() {    
    $(this).find(".caption").animate({ 'opacity': 0.9 });
}).mouseleave(function() {
    $(this).find(".caption").animate({ 'opacity': 0 });
});​

css

ul li {
    float:left; 
    padding:20px; 
    border:solid gray 4px; 
    margin:5px;
}
.caption {
    width: 220px;
    background: #fff; 
    height: 150px;        
    position: absolute;
}​​​

例： http： //jsfiddle.net/hunter/KumcX/201/

于 2012-05-14T15:27:32.620 に答える
1

アニメーション効果を使用して、不透明度を設定します。

$('ul li').mouseenter(function(){
    var image= $(this).find('a img'),
        caption = $(this).find('div');

    caption.width(image.width());
    caption.height(image.height());
    caption.animate({'opacity':0.5});
}).mouseleave(function(){
    var image= $(this).find('img'),
        caption = $(this).find('div');

    caption.width(image.width());
    caption.height(image.height());
    caption.animate({'opacity':0});
});
于 2012-05-14T15:20:28.607 に答える
0

必要な調整は2、3回だけです。まず、CSSで、画像と相対的な位置<div>にまたがるように100％に設定した高さと幅だけでなく、左右の位置を指定する必要があります。<li>画像の上にうまく配置されています。ああ、私はまた、<div>あなたの透明な効果を達成するために、背景に255,255,255,0.5のrgba色を与えました。

JSは問題ありませんが、フィドルでの問題は、インラインスタイルがたくさんあるので、それらを削除すれば、それ以降はすべて正常に機能するはずです。

更新されたフィドルは次のとおりです：http：//jsfiddle.net/KumcX/197/

そして更新されたCSS：

ul li{ float:left; padding:20px; border:solid gray 4px; margin:5px;position:relative}
ul li div{display:none; background:rgba(255,255,255,.5); position:absolute;left:0;top:0;width:100%;height:100%;}

これがお役に立てば幸いです。

于 2012-05-14T15:28:09.590 に答える