Question

当用户悬停div时，此div会增加大小。但是当用户从这个div中移除光标时如何减小大小。

var hoveredDiv;
        $('.promoContent').hover(function () {
            hoveredDiv = $(this).attr('id');
            $('#' + hoveredDiv).animate({height: '100%'});
        });

Answer 1

您可以使用

.hover（）方法为mouseenter和mouseleave绑定处理程序事件。您可以使用它在行为期间简单地将行为应用于元素鼠标在元素中的时间。

// Retrieve storage account from connection string.
CloudStorageAccount storageAccount = CloudStorageAccount.Parse(CloudConfigurationManager.GetSetting("StorageConnectionString"));

// Create the blob client.
CloudBlobClient blobClient = storageAccount.CreateCloudBlobClient();

// Retrieve a reference to a container.
CloudBlobContainer container = blobClient.GetContainerReference("ContainerName");

Answer 2

您也可以使用鼠标悬停和鼠标移动事件。

http://jsfiddle.net/xno5hb34/1/

<button class="promoContent" id="hoveredDiv" style="width:30%; height: 60%; background-color: red">MouseOverToIncreaseSize</button>

var hoveredDiv;
    $('.promoContent').mouseover(function () {
        hoveredDiv = $(this).attr('id');
        $('#' + hoveredDiv).animate({ height: (parseInt($('#' + hoveredDiv).css("height").trim('px')) * 2) + "px" });
    });

    $('.promoContent').mouseout(function () {
        hoveredDiv = $(this).attr('id');
        $('#' + hoveredDiv).animate({ height: (parseInt($('#' + hoveredDiv).css("height").trim('px')) / 2) + "px" });
    });

Answer 3

var hoveredDiv;
    $('.promoContent').hover(function () {
        hoveredDiv = $(this).attr('id');
        $('#' + hoveredDiv).animate({"height": "100%"});
    });

$（＆＃39;＃＆＃39; + hoveredDiv）.animate（{＆＃34; height＆＃34;：＆＃34; 100％＆＃34;}）;

只需添加双qute（＆＃34;＆＃34;）

＆＃34;身高＆＃34;：＆＃34; 100％＆＃34;

JQuery在悬停时增加div大小

3 个答案: