0

そのため、テキストの div を表示する画像のマウスオーバー効果に取り組んでいます。CSS はすべて設定しましたが、Jquery に問題があります。私はワードプレスのテーマでこのインラインを使用していますが、それが私の問題であるかどうか疑問に思っています。

<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript">
    $(".imgHover").hover(function() {
        $(this).children("img").fadeTo(200, 0.25)
        .end().children(".hover").show();
    }, function() {
        $(this).children("img").fadeTo(200, 1)
        .end().children(".hover").hide();
    });
</script>

<div class="imgHover">
    <div class="hover">Test Content for the hover</div>
    <img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="" />
</div>

誰でも私を助けることができますか？

4

1 に答える 1

3

$(document).readyコードを次のようにラップします。

$(document).ready(function() {
    $(".imgHover").hover(function() {
        $(this).children("img").fadeTo(200, 0.25).end()
            .children(".hover").show();
    }, function() {
        $(this).children("img").fadeTo(200, 1).end()
            .children(".hover").hide();
    });
});

またはイベント委任を使用します:

$(document).on("mouseover",".imgHover",function() {
    $(this).children("img").fadeTo(200, 0.25).end()
            .children(".hover").show();
}).on("mouseleave",".imgHover", function() {
    $(this).children("img").fadeTo(200, 1).end()
            .children(".hover").hide();
});
于 2013-02-18T18:30:36.300 に答える