2

ホバー画像に説明を表示しようとしていますが、画像にホバーするとすべての画像に説明が表示されます。私は次のコードを持っています....

    <?php if ($product['thumb']) { ?>
    <div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" /></a></div>
    <?php } ?>

    <div style="display:none;" class="de"> Nunc ornare adipiscing orci eu consectetur. Ut justo libero, porttitor ac elementum luctus, bland..

    <img alt="Based on 2 reviews." src="catalog/view/theme/kid/stars1-4.png"/>
    </div>

    <script type="text/javascript">
    $this('.image').hover(function() {
    // mouseOver function
        $('.de').show();
    }, function() {
    // mouseOut function
    $('.de').hide();
    });
    </script>
4

3 に答える 3

1 
<img src="/some/dir" title="Your description" alt="alternate text"/>

説明を追加する正しい方法です。気をつけてください、それがあなたが求めているものかどうかはよくわかりません。

于 2013-01-01T10:19:09.260 に答える
0

まず第一に、あなたの div は表示なしで、あなたの画像はその中にあります。そのため、表示されません。

<div style="display:none;" class="de"> Nunc ornare adipiscing orci eu consectetur. Ut justo libero, porttitor ac elementum luctus, bland..
</div>
<img alt="Based on 2 reviews." src="catalog/view/theme/kid/stars1-4.png"/>

より多くの画像がある場合に html がどのように見えるかの例はありますか? 現在のhtmlで私が思いついたjavascriptは次のとおりです。

<script type="text/javascript">
    $('img').hover(function() {
    // mouseOver function
        $(this).prev('.de').show();
    }, function() {
    // mouseOut function
        $(this).prev('.de').hide();
    });
</script>​

セレクター「img」を使用しました。ただし、クラスを使用したい場合や、デリゲートを使用したい場合もあります (http://api.jquery.com/on/)

これがフィドルです： http://jsfiddle.net/BvLPY/6/

ハッピーコーディング！

于 2013-01-01T10:18:57.200 に答える
0

更新しました

.next()このスクリプトで使用します。

ホバリング.imagedivの次のdivを見つけるだけです

<script>
$(function(){
    $('.image').hover(function() {
    // mouseOver function
        $(this).next('.de').show();
    }, function() {
    // mouseOut function
        $(this).next('.de').hide();
    });​
});
</script>

フィドルでこれを見つけてください：http://jsfiddle.net/SufeL/

于 2013-01-01T10:20:28.063 に答える