1

私はこのHTMLを持っています:

<div class="left_area">
 <div class="caption"> 
   <a href="<?php echo $URL; ?>"><img src="<?php echo $images; ?>" alt="<?php echo $name; ?>" /></a>
   <span>test</span></div>
</div>

マウスで画像の上に移動したときに、そのスパンに必要なものを表示したいのですが、ボタンの画像や太字のテキストも表示します。この例のようなもの

前もって感謝します！

4

4 に答える 4

3

このようなものを試してください - DEMO

CSS

.caption {
    position: relative;
    width: 300px;
    cursor: pointer;
}

span {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, .7);
    height: 200px;
    width: 300px;
    color: #fff;
}

JS

$('.caption').on({
    mouseover: function() {
        $(this).find('span').fadeIn(200);
    },

    mouseout: function() {
        $(this).find('span').stop().fadeOut(200);
    },
})
于 2012-12-12T18:09:21.517 に答える
1

これを試して

$(document).ready(function(){
  $('a','.caption').mouseenter(function(){
     $('span',$(this).parent()).show();
  }).mouseleave(function(){
     $('span',$(this).parent()).hide();
  });

}）; </ p>

参照 http://jsfiddle.net/puu5u/9/

于 2012-12-12T18:14:20.637 に答える
0

CSSでこれを行うことができます

HTML

​&lt;div class="image">
<p class="caption">Some info related the pic</p>
<img src="http://i.imgur.com/VMaxsb.jpg" />
</div>​

CSS

.image {float: left; position: relative;}
.image .caption {width: 100%; height: 100%; background: rgba(0,0,0,0.82); position: absolute; color: #fff; display: none}
.image:hover​ .caption {display: block;}​

デモ - http://jsfiddle.net/hqLjz/

于 2012-12-12T18:08:52.540 に答える
0

これを試して：

$('ul li').mouseenter(function(){
    var image= $(this).find('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();
});​

フィドル

于 2012-12-12T18:18:15.543 に答える