Jquery 如何创建一个圆，在这个圆的悬停处它应该变大

我想创建一个圆，在这个圆的悬停处，它应该变大

以下是示例：

以上内容在jQueryV1.7.1中非常适用

我想让相同的代码与jQueryV1.9.1一起工作

有人能告诉我，为了使jQuery v1.9.1能够正常工作，我必须做哪些更改

---

任何帮助都将不胜感激。

假设我们有一个

span

设置为显示为块元素：

<span></span>

span { display:block; }

这将创建一个完美的100像素半径的蓝色（#5ae）圆

为了使悬停时（

mouseover

）更大，我们只需要使用jQuery的

animate（）

方法。将

边框半径

和

边框宽度

增加到所需大小：

$('span').on('mouseover', function() {
    $(this).stop().animate({
        'border-width': 200,
        'border-radius': 200
    }, 500);
});

要在

mouseout

上减少此值，我们只需还原更改：

$('span').on('mouseout', function() {
    $(this).stop().animate({
        'border-width': 100,
        'border-radius': 100
    }, 500);
});

使用单个半径位置，而不仅仅是

边界半径

---

使用jQuery UI更改元素的

borderColor

（根据注释）。

您需要这种浏览器支持用于什么类型的浏览器？这些效果在CSS3 web转换和无javascript的情况下都是可能的。e、 嗨，安东尼，谢谢你的回复。我正在寻找所有现代浏览器支持，IE7，IE8和IE9。您在jsfiddle.net中提供的示例没有提供与示例相同的效果。我可能错了，但我相信

边界半径

是在CSS中创建圆的唯一方法。不幸的是，IE7或IE8不支持这一点。Ok。你仍然可以用CSS3实现这种效果，看看这个，但在旧版本的IE中不行。@mkb你给出的例子在IE9中没有动画，在IE7或IE8中也不是循环的。对于IE9中的动画，您可以使用jQuery（我的答案就是使用jQuery）。嗨，James，谢谢您的回复。但当我在跨度上盘旋时，一秒钟内，同样的东西变成了正方形。这与我提供的例子并不完全相同。如果您有任何帮助，我们将不胜感激……您使用的是什么浏览器？它在铬合金中保持圆形。我对它进行了修改，改为使用每个单独的半径位置。这适用于IE9、IE10和Chrome:Edit：这也适用于Firefox 20.0。我的示例工作与您提供的示例工作有所不同。在我的例子中，有一个灰色的大圆圈。里面有一个绿色的小圆圈。绿色悬停时，外圆（灰色）变为黑色。在你的例子中，圆圈向左边和右边增加得更多。你的问题只是说“我想创建一个圆圈，在这个圆圈的悬停处，它应该变大。”。我不知道你想要的正是这个例子。对于更改颜色（使用jQuery），您需要包括。要使圆位于另一个圆内，您需要创建第二个圆，并将新圆放置在其中。

$('span').on('mouseout', function() {
    $(this).stop().animate({
        'border-width': 100,
        'border-radius': 100
    }, 500);
});