Question

我有黑白图像显示。当您将鼠标悬停在图像上时，它会淡入彩色图像，这是一个单独的文件（img-1.png和hover-img-1.png等）。还有一个标题应始终显示在图像之上作为绝对定位的div。

我的问题是图像确实交换了，但是当我将鼠标放在标题上时，图像会返回到黑白而不是保持颜色。

我错过了什么？

以下是我目前的代码：

    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style>
    .galleryImg {
        float:left;
        margin: 10px 4px;
        position:relative;
    }
    .caption {
        position: absolute;
        bottom: 10px;
        right: 15px;
        text-transform:uppercase;
        font-size:14px;
    }
</style>
<script type='text/javascript' src='jquery.js'></script>
<script type="text/javascript">
<!--

    // wrap as a jQuery plugin and pass jQuery in to our anoymous function
    (function ($) {
        $.fn.cross = function (options) {
            return this.each(function (i) { 
                // cache the copy of jQuery(this) - the start image
                var $$ = $(this);

                // get the target from the backgroundImage + regexp
                var target = $$.css('backgroundImage').replace(/^url|[\(\)'"]/g, '');

                // nice long chain: wrap img element in span
                $$.wrap('<span style="position: relative;"></span>')
                    // change selector to parent - i.e. newly created span
                    .parent()
                    // prepend a new image inside the span
                    .prepend('<img>')
                    // change the selector to the newly created image
                    .find(':first-child')
                    // set the image to the target
                    .attr('src', target);

                // the CSS styling of the start image needs to be handled
                // differently for different browsers
                if ($.browser.msie || $.browser.mozilla) {
                    $$.css({
                        'position' : 'absolute', 
                        'left' : 0,
                        'background' : '',
                        'top' : this.offsetTop
                    });
                } else if ($.browser.opera && $.browser.version < 9.5) {
                    // Browser sniffing is bad - however opera < 9.5 has a render bug 
                    // so this is required to get around it we can't apply the 'top' : 0 
                    // separately because Mozilla strips the style set originally somehow...                    
                    $$.css({
                        'position' : 'absolute', 
                        'left' : 0,
                        'background' : '',
                        'top' : "0"
                    });
                } else { // Safari
                    $$.css({
                        'position' : 'absolute', 
                        'left' : 0,
                        'background' : ''
                    });
                }

                // similar effect as single image technique, except using .animate 
                // which will handle the fading up from the right opacity for us
                $$.hover(function () {
                    $$.stop().animate({
                        opacity: 0
                    }, 250);
                }, function () {
                    $$.stop().animate({
                        opacity: 1
                    }, 250);
                });
            });
        };

    })(jQuery);

    // note that this uses the .bind('load') on the window object, rather than $(document).ready() 
    // because .ready() fires before the images have loaded, but we need to fire *after* because
    // our code relies on the dimensions of the images already in place.
    jQuery(window).bind('load', function () {
        jQuery('img.fade').cross();
    });

    //-->
</script>    
</head>

<body>
<div class="galleryImg">
    <a href="some_link">
        <img src="images/img-1.png" alt="" title="" class="fade" style="background: url(images/hover-img-1.png);" />
        <div class="caption">This is Image 1</div>
    </a>
</div>
<div class="galleryImg">
    <a href="some_link">
        <img src="images/img-2.png" alt="" title="" class="fade" style="background: url(images/hover-img-2.png);" />
        <div class="caption">This is Image 2</div>
    </a>
</div>
<div class="galleryImg">
    <a href="some_link">
        <img src="images/img-2.png" alt="" title="" class="fade" style="background: url(images/hover-img-2.png);" />
        <div class="caption">This is Image 3</div>
    </a>
</div>
</body>

Answer 1

可能是因为div.caption覆盖了图像，并且不是注册悬停事件处理程序的图像的子代。

将img和div.caption换行div.Something并在div.Something上注册悬停处理程序而不是图像。或者，实际上，您可以在已经包装它们的<a>上注册处理程序;）

不知道修改插件是否“正确”是这样做的，但在这种情况下最快的解决方法是更改

        $$.hover(function () {
            $$.stop().animate({
                opacity: 0
            }, 250);
        }, function () {
            $$.stop().animate({
                opacity: 1
            }, 250);
        });

到

        $$.closest('.galleryImg').hover(function () {
            $$.stop().animate({
                opacity: 0
            }, 250);
        }, function () {
            $$.stop().animate({
                opacity: 1
            }, 250);
        });

更新：使用.closest('.galleryImg')代替.parent()修复。

jquery交换图像悬停与标题

1 个答案: