Question

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

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

感谢您的帮助

Answer 1

如果您在小提琴示例中查看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结构。

Answer 2

在fiddle代码中更改

中的js

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

参见 demo

Answer 3

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

<!-- 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/

P.S：可以使用fadeToggle：http://api.jquery.com/fadeToggle/

来压缩代码

Answer 4

你不能在锚点内有另一个<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); 
    });
});

FIDDLE

Answer 5

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

Answer 6

当简单地完成时，不要让事情变得复杂，
只需改变

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); 
    });
});

工作DEMO

Jquery悬停在<a> element does not run?</a>

6 个答案: