在錨點懸停上爲圖像添加邊框或方塊陰影

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>