Question

我有一个圆圈，当它盘旋时会变大，当点击时会略微收缩。这是使用:hover和:active CSS伪类完成的：

#circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    transition-duration: 0.2s;
}
#circle:hover {
    width: 120px;
    height: 120px;
}
#circle:active {
    width: 110px;
    height: 110px;
}

如果我使用以下jQuery来增加圆圈的大小，那么即使悬停或点击（可以理解），圆圈仍然保持这个大小。

var circle = $("#circle");
circle.width(200);
circle.height(200);

JSFiddle available here

如何在jQuery中增加圆圈的大小，但是当它在盘旋时仍然会增长并在点击时略微缩小？例如。当我将大小设置为200px时，它会在悬停时增长到240px，在点击时增长到220px。

注意： 100px和200px等值只是示例。我正在寻找一种解决方案，允许我将圆圈的大小更改为任意大小，并在悬停/点击时保持不断增长/缩小。

Answer 1

您可以使用jQuery .mouseover（）和 .mouseleave（）事件。您可以看到更新的jsFiddle here

var circle = $("#circle");
circle.css('border-radius', '50%');
circle.mouseover(function(){
    circle.css('width', '200px');
  circle.css('height', '200px');
});

circle.mouseleave(function(){
    circle.css('width', '100px');
  circle.css('height', '100px');
});

修改

var circle = $("#circle"); var width = circle.width(); circle.mouseover(function(){ circle.css('width', width*1.2); circle.css('height', width*1.2); }); circle.mouseleave(function(){ circle.css('width', width); circle.css('height', width); }); circle.click(function(){ circle.css('width', width*1.1); circle.css('height',width*1.1); });

Answer 2

首先，将圈子的边框半径始终设置为50％，如下所示：

#circle {
    border-radius: 50%;
}

然后，删除#circle：hover和#circle：active CSS语句。

最后，用以下内容替换当前的jQuery代码：

var circle = $("#circle");

circle.click(function() {
    circle.width(200);
    circle.height(200);
});

circle.mouseover(function() {
    circle.animate({
        height: "+=20",
        width: "+=20"
    }, 250);
});

circle.mouseleave(function() {
    circle.animate({
        height: "-=20",
        width: "-=20"
    }, 250);
});

circle.mousedown(function() {
    circle.animate({
       height: '-=10',
       width: "-=10"
    }, 250);
});

当前大小的变化需要250毫秒，但您只需更改animate（）函数末尾的值即可轻松调整。

Answer 3

我找到了一个CSS解决方案：将圈子放在容器div中，以便CSS中的width和height可以相对于容器，然后更改容器的大小而不是圆。这需要使用transform来保持圆心，但似乎运作良好。

<div id="container">
    <div id="circle"></div>
</div>

CSS：

#container {
    width: 100px;
    height: 100px;
    transition-duration: 0.2s;
}
#circle {
    transition-duration: 0.2s;
    border-radius: 50%;
    width: 100%;
    height: 100%;
}
#circle:hover {
    width: 120%;
    height: 120%;
    transform: translate(-10%, -10%);
}
#circle:active {
    width: 110%;
    height: 110%;
    transform: translate(-5%, -5%);
}

更改圆圈大小的示例：

var circle = $("#circle");
var container = $("#container");
circle.click(function() {
    container.width(200);
    container.height(200);
});

JSFiddle here

在jQuery中更改元素的大小，同时保持CSS中的相对大小更改

3 个答案: