html - 在 anchor 悬停上为图像添加边框或框阴影

Question

当我将鼠标悬停在链接上时，我需要为图像添加边框或框阴影。悬停应该在圆形图像周围显示动画圆圈。我正在使用以下 CSS，但它不起作用。

https://codepen.io/anon/pen/mArEoX

<div class="sub-page-menu-item-w">
  <div class="sub-page-menu-img">
    <img src="http://dummyimage.com/200x200/0066ff/fff" class="sub-page-menu-imgx img-responsive img-circle">
  </div>
  <a href="/location/" class="sub-page-menu-a">Location</a>
</div>

.img-circle{
  border-radius:100%;
}
.sub-page-menu-a:hover ~ .img-circle {
  display: block;
  box-shadow: 0 0 0 14px #B28164 !important;
}
.sub-page-menu-a:hover {
  color:green !important;
  font-size:18px !important;
}

Answer 1

通用兄弟选择器(~)不会找到选择器左侧元素之前的元素。要完成这项工作，您必须在 HTML 中切换 sub-page-menu-a 和 sub-page-menu-img 的顺序。

然而，这仍然无法工作，因为 img-circle 不是 sub-page-menu-a 的兄弟。

工作代码:

.img-circle{
  border-radius:100%;
}
.sub-page-menu-a:hover ~ .sub-page-menu-img .img-circle {
  display: block;
  box-shadow: 0 0 0 14px #B28164 !important;
}
.sub-page-menu-a:hover {
  color:green !important;
  font-size:18px !important;
}

<div class="sub-page-menu-item-w">
  <a href="/location/" class="sub-page-menu-a">Location</a>
  <div class="sub-page-menu-img">
    <img src="http://dummyimage.com/200x200/0066ff/fff" class="sub-page-menu-imgx img-responsive img-circle">
  </div>
</div>