Jquery 地物标记会干扰图像的鼠标悬停。我不知道怎么解决这个问题

当img标签独立时，它工作正常。但是当这个数字是父母的时候，它就不起作用了

我不明白为什么这是个问题。我尝试了不同的选择器来初始化cross和$$变量的不同选择器，例如：

var $$ = $(this).find("img.fade");

和运行交叉：

$('figure').cross();

或：

但什么都没有

JSIDLE不工作脚本：

与img single一起工作：

HTML:

JS:

$('figure').hover(function() {cross();});

<div class="gridContainer clearfix">
<div id="container" class="fluid clearfix">
<figure class="box col1">
    <img class="fade" src="http://placehold.it/500/FCDE45/ffffff&text=Original+Image" style="background-image: url(http://placehold.it/500/FCDE45/ffffff&text=Hover+Image)" />
    <figcaption>
      <div class="cenfig">
         <p>
          <strong>Headline</strong>
          <em>Description of content</em>
        </p>
    </div>
    </figcaption>
</figure>
</div>
</div>

img, object, embed, video {
    max-width: 100%;
}

.gridContainer {
    margin-left: auto;
    margin-right: auto;
    width: 60%;
}


#container {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
    background: #FFF;
}

figure { display: block; position: absolute; margin: 0; }

.box {
  margin: 5px;
  padding: 5px;
  background: #FFF;
  font-size: 11px;
  line-height: 1.4em;
  float: left;
}

.box h2 {
  font-size: 14px;
  font-weight: 200;
}

.rtl .box {
  float: right;
  text-align: right; 
  direction: rtl;
}



/**** Fluid ****/

#container.fluid  {
  padding: 0;
}

/* right margin value is 0.1% less than calculated,
  to allow for rounding errors in Firefox */
.fluid .box {
    background-color: #F8F8F8;
    margin: 1% 0.9% 1% 1%;
    padding: 1% 1% 1% 1%;
  -webkit-transition: background-color 0.3s ease-out;
     -moz-transition: background-color 0.3s ease-out;
      -ms-transition: background-color 0.3s ease-out;
       -o-transition: background-color 0.3s ease-out;
          transition: background-color 0.3s ease-out;
}
.fluid .box:hover {
    background-color: #D5DE1F;
}

.fluid .box.col1 { width: 30%; }
.fluid .box.col2 { width: 36%; }
.fluid .box.col3 { width: 64%; }

    figure span { margin: 0; padding: 0; height: 0;}

    .cenfig {
    width: 100%;
    height: 100%;
  display: table;
    background: none;
}
.cenfig p {
    text-align: center;
  display: table-cell;
  vertical-align: middle;
    width: 100%;
}

figcaption{
    opacity: 0;
    text-align: center;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
  -webkit-transition: opacity 0.3s ease-out;  
     -moz-transition: opacity 0.3s ease-out;  
      -ms-transition: opacity 0.3s ease-out;  
       -o-transition: opacity 0.3s ease-out;  
          transition: opacity 0.3s ease-out; 
}

figure:hover figcaption {
    opacity: 1;
}

figcaption strong,
figcaption em {
    display: block;
    margin-left: 30px;
    margin-right: 30px;
}

figcaption strong {
    text-transform: uppercase;
    font-size: 2.0em;
    font-weight: bold;
    line-height: 1.3em;
    padding-bottom: 7px;
    margin-top: 0;
    border-bottom: 1px solid #333;
}

figcaption em {
    font-weight: 400;
    font-style: normal;
    font-size: 1.3em;
    margin-top: 10px;
}

/* Floats beinhalten: h5bp.com/q */ 
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

<!--

// 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("background-image").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
                }, 150);
            }, function () {
                $$.stop().animate({
                    opacity: 1
                }, 150);
            });
        });
    };

})(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.
$(window).bind('load', function () {
    $('img.fade').cross();
});

//-->