如何在悬停时为圆形图像添加边框？ css或jquery

Question

我是网页设计的新手，我正在试图弄清楚如何在悬停时为圆形图像添加圆形边框。我正在使用下面的图片。我想在悬停时为其添加红色边框。它已经有一个灰色边框。我希望边框与内置边框重叠。有谁能帮助我找出最好的方法吗？我不太了解jquery。如果解决方案是在css中，那将会很棒。

Answer 1

<强> LIVE DEMO

如果您的图片元素是：.circ，例如<img class="circ" src="img.jpg">并且您有

.circ{
    width : 100px;
    vertical-align: middle;
    border-radius: 50%;
    box-shadow: 0 0 0 15px #ddd;
    transition: box-shadow 0.3s;
}

您需要添加的是：

.circ:hover{
    box-shadow: 0 0 0 15px #f00;
}

Answer 2

这是用于向对象添加圆形边框的CSS代码，然后在悬停时将该边框更改为红色。

#circle{
    height:400PX;
    width:400px;
    border-radius:50%;
    border:1px solid black;
}

#circle:hover{
    border:1px solid red;
}

您不需要第一次设置边框，但我添加了此边框以展示效果。希望这可以帮助。