Question

以下是 jsfiddle

//Fade in and out animation on hove buttons - icon set, features.
$(window).load(function() {
    $("ul#features_icons li img").hover(function() {
        $(this).next("span").animate({ opacity: "show" }, "fast");
    }, function() {
        $(this).next("span").animate({opacity: "hide"}, "fast");
    });
});

我正在尝试完成悬停效果，其中跨度的内容将显示：none，但是只要悬停在它上面就会变为display：block。使用css我设法通过使用负边距将其置于图像的顶部，但我的问题是将此跨度与图像相关。

有什么想法吗？

用css是不可能的。所以必须使用jquery吗？

谢谢！

Answer 1

demo jsFiddle

我们必须计算图像的中心（宽度/ 2）和跨度的中心（宽度/ 2）。
在我们有var之后，我们可以使用 span's marginLeft。

var spanW = 0;
var imgW = $('li img').width()/2;
$(window).load(function() {
    $("ul#features_icons li img").hover(function() {
        spanW = $(this).next("span").width()/2;
        $(this).next("span").css({marginLeft: -spanW-imgW }).stop().animate({ opacity: "show" }, "fast");
    }, function() {
        $(this).next("span").stop().animate({opacity: "hide"}, "fast");
    });
});

我甚至在您的动画之前添加了.stop()以防止动画冒泡（快速鼠标移动你的元素问题）。

使用jquery在顶部固定大小的图像上居中可变宽度范围

1 个答案:

demo jsFiddle