带边框的图标，彼此相邻并带有边框悬停效果

我有一个小障碍。我想在一行中有边框相邻的图标，但悬停效果会改变图标的边框颜色。带边框的图标，彼此相邻并带有边框悬停效果

当我使边框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

带边框的图标，彼此相邻并带有边框悬停效果

回答

相关问题