IMG悬停添加样式

img hover add style

本文关键字：样式 添加 悬停 IMG      更新时间：2023-09-26

我正在使用下面来自 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标记是这样的

<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;">

有没有办法将填充和 FOAT 值添加到范围？

感谢您的帮助

只需在其他规则旁边添加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");
相关文章：