使用jquery减小图像大小？

Question

当我将image size输入包含{jquery的{​​{1}}时，我需要使用div（不是mouse大小）缩减div {1}}。

我的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"); }); }); 来自，

To，

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

肯定赞赏好的答案。

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

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

Answer 2

仅限CSS：

的 LIVE DEMO

.toolbarIcon:hover img{
  width:35px;
  height:35px;
  padding-bottom:5px; // compensate resize
}

的 DEMO WITH CSS3 ANIMATION

.toolbarIcon img{
  padding-bottom:0px;
  -webkit-transition: all 0.2s ease;
          transition: all 0.2s ease;
}
.toolbarIcon:hover img{
  width:35px;
  height:35px;
  padding-bottom:5px;
}

Answer 3

这个怎么样：

$(".toolbarIcon").mouseover(function(){
    $(this).find("img").css("width","30px").css("height","30px");
});

Answer 4

您可以使用mouseeneter和mouseleave。见thread

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

Answer 5

我认为以下内容应该有效

（文档）$。就绪（函数（）{

 $('.toolbarIcon img').css('width', '60px')
});

或者你可以给img一个id如img1

（文档）$。就绪（函数（）{

 $('#img1').css('width', '60px')
});

我确实测试了这个，但我认为它应该可行