帶邊框的圖標，彼此相鄰並帶有邊框懸停效果

我有一個小障礙。我想在一行中有邊框相鄰的圖標，但懸停效果會改變圖標的邊框顏色。帶邊框的圖標，彼此相鄰並帶有邊框懸停效果

當我使邊框2px爲純綠色的懸停效果時，前兩個圖標向左移動2 px。如何讓懸停效果邊框顏色在一個圖標周圍變得不同。

圖標來自字體真棒，這裏不可見。

span{ 
 
    border: 2px solid red; 
 
    &:nth-child(1), 
 
    &:nth-child(2) { 
 
     border-right: none; 
 
    } 
 
}

<a href="#"> 
 
    <span> 
 
    <i class="fa fa-bars" aria-hidden="true"></i> 
 
    </span> 
 
    <span>PL</span> 
 
    <span id="over-menu-open"> 
 
    <i class="fa fa-long-arrow-up " aria-hidden="true"></i> 
 
    </span> 
 
</a>

來源

2017-04-20 Blosom

不要使用不同的邊框寬度，而是一個透明的邊框顏色。或者使用'outline'而不是邊框，它根本不影響元素的尺寸和位置。 – CBroe

這是一個[從CDN加載Font Awesome的筆]（https://codepen.io/PhilippeVay/pen/xdVxEL）。並且Scss +正常化+ Autoprefixer。您可以從那裏添加您的懸停效果和相關樣式，並將其分叉。 – FelipeAls

我不知道如果我得到你的權利，但你可以試試這個：

span { 
    border: 2px solid red; 

    & + & { 
    border-left-color: transparent; 
    } 
}

以上設置邊框顏色爲透明，而不是刪除它，因此元素不會跳躍。

來源

2017-04-20 09:50:15

解決方法是使用span:hover + span選擇器刪除下一個span的左邊界。

span { 
 
    border-top: 2px solid red; 
 
    border-left: 2px solid red; 
 
    border-bottom: 2px solid red; 
 
    padding: 1px; 
 
} 
 

 
span:last-child { 
 
    border-right: 2px solid red; 
 
} 
 

 
span:hover { 
 
    border: 2px solid green; 
 
} 
 

 
span:hover + span { 
 
    border-left: none; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> 
 

 
<a href="#"><span><i class="fa fa-bars" aria-hidden="true"></i></span><span>PL</span><span id="over-menu-open"><i class="fa fa-long-arrow-up " aria-hidden="true"></i></span></a>

來源

2017-04-20 09:55:45 Shiva127

謝謝溼婆！這是工作。我不知道，但當我使用Saas風格時，它不起作用，但是正常的css正在工作。此外，轉換較慢的效果也會中斷。但是當我取消過渡效果，效果很好，可見:) – Blosom

所以你驗證了其他答案。我不明白。 ;） – Shiva127

帶邊框的圖標，彼此相鄰並帶有邊框懸停效果

回答

相關問題