jquery - 更改 jQuery 中元素的大小，同时保持 CSS 中的相对大小变化

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