在 img 鼠标悬停时显示 div (jquery)

Posted 2023-05-08

【中文标题】在 img 鼠标悬停时显示 div (jquery)

【英文标题】：Display div on img mouseover (jquery)

【发布时间】：2013-02-03 06:33:54

【问题描述】：

所以我正在研究将显示文本 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"  />
</div>

谁能帮帮我？

【问题讨论】：

api.jquery.com/ready

【参考方案1】：

将您的代码包装在$(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();
);

【讨论】：

顺便说一句，您可以在整个代码中将.end().children(".hover") 替换为siblings(".hover")。