1

を含むに を入力したときに、 image sizeusing jquery(divサイズではなく)を減らす必要があります。mousedivimage

私の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ました。マウス イオンを入力したときに、を使用してこれを達成するにはどうすればよいですかdiv。

良い答えは間違いなく高く評価されます。

4

5 に答える 5

4

画像のサイズを設定するだけで、ブラウザがサイズを調整します.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;
}

必要な効果によっては、画像の下のパディングを微調整して、ホバーしたときに画像が垂直方向の中央にくるようにすることもできます。

于 2013-05-03T15:16:20.867 に答える
1

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;
}
于 2013-05-03T15:20:00.633 に答える
0

mouseeneterとを使用できますmouseleave。スレッドを参照

$(".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");
});
于 2013-05-03T15:18:08.460 に答える
0

私は次のように動作するはずだと思います

$(document).ready(function(){

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

または、img に img1 などの ID を与えることもできます

$(document).ready(function(){

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

私はこれをテストしていませんが、うまくいくはずです

于 2013-05-03T15:24:41.043 に答える
0

これはどう：

$(".toolbarIcon").mouseover(function(){
    $(this).find("img").css("width","30px").css("height","30px");
});
于 2013-05-03T15:16:39.930 に答える