-2

元素的jQuery悬停<a>不运行？

我想在图像上悬停时显示按钮。我使用 Jquery hover 来做到这一点，但它没有成功。我需要你的帮助。这是我的演示：http: //jsfiddle.net/happi/t5u28/

谢谢你的帮助

4

6 回答 6

2

如果您查看小提琴示例中的 DOM，您会看到内部<a>标签被移到外部标签之外，因此它们是兄弟姐妹。这就是为什么你不能打电话的.find()原因，因为它不是外部的后代<a>

jQuery(function() {    
    jQuery(".the-button").hide();
    jQuery('a.show-image').hover(function() {
         jQuery('.the-button').fadeIn(1500);
    }, function() {
        jQuery('.the-button').fadeOut(1500); 
    });
});

之所以有效，是因为它不是尝试搜索悬停<a>标签子项，而是搜索.the-button文档中的任何元素。你应该想出一个更好的 HTML 结构。

于 2013-09-11T04:54:53.013 回答
1

就像在你的小提琴代码中改变 js

jQuery(function() {    
    jQuery(".the-button").hide();
    jQuery('a.show-image').hover(function() {
        jQuery('.the-button').fadeIn(1500);
    }, function() {
        jQuery('.the-button').fadeOut(1500); 
    });
});

看演示

于 2013-09-11T04:56:33.757 回答
1

如果我正确理解了您的要求，这应该可以解决问题。

<!-- Move second anchor outside the first one and let CSS handle the overlay effect -->
<a href="#" class="show-image">
    <img src="http://www.uniqlo.com/us/tiles/images/20130814/520bee8eae8a1.jpg" />   
</a>

<a href="#" class="the-button">Button here</a>

$( document ).ready(function() {
    $(".the-button").hide();


    $('a.show-image').mouseenter(function() {
      //  alert("hover");
         $('.the-button').fadeIn(1500);
    });

    $('a.show-image').mouseleave(function() {
      //  alert("hover");
         $('.the-button').fadeOut(1500);
    });
});

http://jsfiddle.net/jamespoulson/FPuSW/

PS：代码可以使用fadeToggle进行压缩：http: //api.jquery.com/fadeToggle/

于 2013-09-11T04:58:50.647 回答
1

<a>锚内不能有另一个。我建议您将图像包装在div 

jQuery(function() {    
    jQuery(".the-button").hide();
    jQuery('.show-image').hover(function() {
         jQuery(this).find('.the-button').fadeIn(1500);
    }, function() {
        jQuery(this).find('.the-button').fadeOut(1500); 
    });
});

小提琴

于 2013-09-11T04:59:38.163 回答
1 
$( document ).ready(function() {
    $(".the-button").hide();
    $('a.show-image').hover(function() {
       $('.the-button').fadeIn(1500);
    },function()
    {
       $('.the-button').fadeOut(1500);
    });
});
于 2013-09-11T05:02:38.243 回答
1

当事情可以简单地完成时，永远不要让事情变得复杂，
只要改变

jQuery(this).find('.the-button').fadeIn(1500);

和

$('.the-button').fadeIn(1500);

完整的工作代码。

$(function() {    
    $(".the-button").hide();
    $('a.show-image').hover(function() {
         $('.the-button').fadeIn(1500);
    }, function() {
        $('.the-button').fadeOut(1500); 
    });
});

工作演示

于 2013-09-11T05:07:55.493 回答