css - 使用 jquery 减小图像大小？

Question

我需要减少image size使用jquery (不是 div 大小)，当我输入 mouse 时进入div其中包含 image .

我的div将是，

<div class="toolbarIcon" >
    <img width="40px" height="40px" src="toolbar/user_login.png"/><label class="toolbarLabel">Login</label>
</div>

CSS将是，

.toolbarIcon {
    text-align: center;
    border-style: solid;
    border-width: 1px;
    border-color: #E6E6E6;

    width: 60px;
    float: left;
}

还有jquery将是，

$(document).ready(function(){

    $("#toolbar").corner("5px");
    $(".toolbarIcon").corner();

    $(".toolbarIcon").mouseover(function(){
        $(this).css("background-color","#FFCC80");
    });
    $(".toolbarIcon").mouseout(function(){
        $(this).css("background-color","#EBEBFF");
    });


    $(".toolbarIcon").mouseup(function(){
        $(this).css("background-color","#FFCC80");
    });
    $(".toolbarIcon").mousedown(function(){
        $(this).css("background-color","#E6B85C");

    });

});

design来自，

至，

注意:图像的大小已更改。如何使用 Jquery 实现此目的，当我输入鼠标 ionic 时div .

好的答案绝对值得赞赏。

Answer 1

您只需设置图像的大小，浏览器就会为您缩放图像，我建议使用 .hover() 事件，该事件涵盖鼠标悬停和鼠标离开:

$(".toolbarIcon").hover(function(){
    $(this).css("background-color","#FFCC80");
    $(this).find("img").css({height: "30px", width: "30px"});
}, function() {
    $(this).css("background-color","#EBEBFF");
    $(this).find("img").css({height: "40px", width: "40px"})
});

您也可以仅使用 CSS 来实现此目的:

.toolbarIcon:hover img {
     width: 30px;
     height: 30px;
}

根据您想要的具体效果，您可能还需要调整图像下方的填充，以使其在悬停时保持垂直居中。