在img mouseover上显示div(jquery)

时间:2013-02-18 18:25:31

标签: jquery css wordpress hover mouseover

所以我正在对将显示div文本的图像进行鼠标悬停效果。我有所有设置的CSS,但我遇到了Jquery的问题。我在wordpress主题中使用这个内联,我想知道这是否是我的问题。

<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>

任何人都可以帮助我吗?

1 个答案:

答案 0 :(得分: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();
    });
});

或使用event delegation

$(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();
});