div悬停上的小图像覆盖（jQuery）答案

【问题标题】：Small image overlay on div hover (jQuery)div悬停上的小图像覆盖（jQuery）
【发布时间】：2011-10-16 18:24:22
【问题描述】：

我正在尝试在 div 悬停功能上制作 jQuery 图像叠加，但我遇到了一些奇怪的行为。希望有人能帮我解决这个问题（灵感来自jQuery image hover color overlay）

HTML：

<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <title>Test page</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('.tile').bind('mouseover', function () {
                $(this).css({ position: 'relative' });
                $('<div />').text(' ').css({
                    'height': $(this).height(),
                    'width': $(this).width(),
                    'background': 'url(hover_top.png) top left no-repeat',
                    'position': 'absolute',
                    'top': 0,
                    'left': 0,
                    'opacity': 0.0
                }).addClass("hover-tile").bind('mouseout', function () {
                    $(this).fadeOut('fast', function () {
                        $(".hover-tile").each(function () { $(this).remove(); });
                    });
                }).appendTo(this).animate({
                    'opacity': 0.5
                }, 'fast');
            });
        });
    </script>
    <style type="text/css">
        body { background: #ddd; }
        .left { float: left; }
        .tile { width: 200px; height: 65px; background-color: Red; cursor: pointer; margin: 10px; }
    </style>
</head>
<body>
    <div>
        <div class="tile left">
            <div class="title">This is title 1</div>
            <div class="description">This is description 1</div>
        </div>

        <div class="tile left">
            <div class="title">This is title 2</div>
            <div class="description"></div>
        </div>

        <div class="tile left">
            <div class="title">This is title 3</div>
            <div class="description">This is description 3</div>
        </div>
    </div>
</body>
</html>

hover_top.png 只是一个 10x10 像素的小图像，我想显示在 tile div 的顶部（左上角）。图像在悬停时显示，但很快消失（我猜是因为失去焦点）。

希望有人可以帮助我解决这些怪癖！谢谢。

【问题讨论】：

标签： jquery html css

【解决方案1】：

除非您特别需要鼠标悬停，否则请使用 mouseenter 和 mouseleave。 jQuery docs 有一个不同的例子。

【讨论】：