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

Question

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

Answer 1

使用 :hover 伪选择器。

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

例子:

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

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

<img class="circ" src="//placehold.it/150x150/0bf">