在锚点悬停时为图像添加边框或框阴影答案

【问题标题】：On anchor hover add border or box-shadow for image在锚点悬停时为图像添加边框或框阴影
【发布时间】：2016-09-30 13:02:17
【问题描述】：

当我将鼠标悬停在链接上时，我需要为图像添加边框或框阴影。悬停应该在圆形图像周围显示动画圆圈。我正在使用以下 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;
}

【问题讨论】：

标签： html css

【解决方案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>

【讨论】：

在 div 示例 codepen.io/anon/pen/xELEkq987654321@ 之后移动锚点将不起作用
没错。我在回答中解释了为什么这是真的。 - "通用兄弟选择器(~)不会找到选择器左侧元素之前的元素"
有没有办法让它通过 CSS 工作，因为我无法将链接移动到另一个 div
没有可以在 DOM 中向后移动的 CSS 选择器。
您可以将:hover 添加到父元素 - codepen.io/anon/pen/RGkGGJ

【解决方案2】：

由于没有previous兄弟选择器或父选择器，我们可以在这里做一个小技巧，使用flexbox 及其order 属性。

在下面的示例中，锚点位于标记中图像div/img 组之前，然后通过提供锚点order: 1 及其父级display: flex 来交换它们的顺序

另外，兄弟选择器~ 用于兄弟姐妹，而不是孩子，因此它必须定位图像div，它将定位img，就像这样.sub-page-menu-a:hover ~ .sub-page-menu-img .img-circle

.sub-page-menu-item-w {
  display: flex;
  flex-direction: column;
}
.sub-page-menu-item-w a {
  order: 1;
}

.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>

【讨论】：

它在移动浏览器上是否有效.. 我必须检查一下这似乎是一个非常好的技巧
@Learning 是的，请查看此浏览器支持列表：caniuse.com/#feat=flexbox