在锚点悬停上为图像添加边框或方块阴影

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>

Answer 2

由于没有以前兄弟选择或家长选择我们可以在这里做一个小窍门，使用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>