Question

我正在尝试在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（左上角）的顶部。图像在悬停时显示，但很快消失（因为失去焦点，我认为）。

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

Answer 1

除非您特别需要鼠标悬停，否则请使用mouseenter和mouseleave。有jQuery docs的差异示例。

div hover（jQuery）上的小图像叠加

1 个答案: