Question

我使用http://webdesignandsuch.com/create-overlay-on-image-hover-jquery-css3/中的代码为我的图片添加了一个范围。该脚本工作正常，但我需要将更多的样式值插入跨度。

 $(function() {
    // OPACITY OF BUTTON SET TO 0%
    $(".roll").css("opacity","0")

    // ON MOUSE OVER
    $(".roll").hover(function () {

        var s = $(this).siblings('img');
        var w = s.css("width");
        var h = s.css("height");

        // SET OPACITY TO 70%
        $(this).css("height",h).css("width",w).stop().animate({
            opacity: .7
        }, "slow");
    },

    // ON MOUSE OUT
    function () {

    // SET OPACITY BACK TO 50%
        $(this).stop().animate({
        opacity: 0
        }, "slow");
    });
});

img-markup是这样的

<span class="roll" style="height: 137px; width: 172px; opacity: 0;"></span>

<img width="172" height="135" class="img-responsive-rte" alt="" src="img/butterflower.jpg" style="padding-right: 10px; padding-bottom: 10px; float: left;">

有没有办法将填充和填充值添加到跨度？

感谢您的帮助

Answer 1

只需在其他规则旁边添加padding和float：

$(this).css("height",h).css("width",w).css("padding", "10px"). css("float", "left").stop().animate({
        opacity: .7
    }, "slow");

最好将所有css规则分配给：

$(this).css({"height":h, "width":w, "padding":"10px", "float":"left"}).stop().animate({
        opacity: .7
    }, "slow");

jquery - img hover添加样式

1 个答案: