0

画像の上にテキストを表示したい。誰かが画像の上にマウスを置くたびに。

私のDivブロックは次のとおりです。

<div class="MainDIV">
<br><br><br>
<div class="popular_stores"  align="center">

    <span style="font-size: 12pt;">Browse our list of stores that we have coupons, coupon codes, and promo codes for.
    </span>
    <br>
    <ul>
    <li>
        <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR31R-rZO7MBzgGMrZlpa7C0-tx3CmzVz6pha7kt8Fw6PjpsMGENg" style="width: 100px;height: 50px;" >
    </li>
    <li>
        <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR31R-rZO7MBzgGMrZlpa7C0-tx3CmzVz6pha7kt8Fw6PjpsMGENg" style="width: 100px;height: 50px;" >
    </li>
    <li>
        <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR31R-rZO7MBzgGMrZlpa7C0-tx3CmzVz6pha7kt8Fw6PjpsMGENg" style="width: 100px;height: 50px;" >
    </li>
</ul>
</div></div>

CSS と JavaScript 関数の残りの部分は次のとおりです。

<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript"> 

$('.drama').mouseover(function(){
    alert("dss");
    var tt = $(this).parent().find('.toolTip');
    tt.html($(this).attr('title'));
    tt.show();
});
$('.drama').mouseout(function(){
    var tt = $(this).parent().find('.toolTip');
    tt.hide();
});

</script> 


<style type="text/css">

body {
    text-align: center;
    }

.MainDIV{
    padding:0;
    width:700px;    
    display: inline-block;  
    background-color:white;
    }

.MainDIV ul
{ 
list-style-type: none;
}

.MainDIV  ul li { 
    display: inline-block;
    padding : 1em;
    }

.MainDIV ul li img
{

    padding: .2em ;
    border-radius: 10px;
    -moz-border-radius: 10px;
    background-color: #F5F5E3;
}

ul li div{display:none; background:white; opacity:.5; position:absolute;}

私がやろうとしていることはここに示されています.見てください：ここをクリック

このページと同様に、誰かが画像の上にマウスを置くたびに、画像の上にテキストを表示したいと考えています。誰か助けてくれませんか...

4

1 に答える 1

3

考えられる最も簡単な方法でフィドルを作成します。

$('#hover1').mouseover(function(){
   $('#hoverDiv1').css('opacity', 1)
});


$('#hover1').mouseout(function(){
   $('#hoverDiv1').css('opacity', 0)
});

このフィドルを見てください

「li」を定義する必要があるため、ホバー効果が正しく配置されません。簡単なjQueryの方法を示すだけです。

一番

于 2013-04-22T17:49:14.460 に答える