如何在菜单上进行边框悬停答案

【问题标题】：How to do border hover on menu如何在菜单上进行边框悬停
【发布时间】：2013-07-17 09:09:43
【问题描述】：

我需要在菜单的每个部分上进行边框悬停。在第一部分还可以，但是当我将鼠标悬停在其他元素上时，左边框和菜单看起来很糟糕。

我不需要每边（左，右）双边框，在正常状态和悬停状态下需要 1 个左边框，1 个右边框。

示例： http://codepen.io/smithua/pen/vHJqp

我需要的悬停示例： http://yadi.sk/d/q2yfzwh76vwsS

【问题讨论】：

【解决方案1】：

去掉 CSS 中的第 26 行，一切顺利。

【讨论】：

【解决方案2】：

尝试左边框：0；在 .clt_nav_tab ul li a:hover 类

【讨论】：

【解决方案3】：

从 .clt_nav_tab ul li a { 中删除 border-left-width: 1;（第 26 行）

刚刚注意到 user1702965 已经建议删除第 26 行 :)

【讨论】：

【解决方案4】：

仅更改第 39 行的边框颜色。

【讨论】：

【解决方案5】：

添加边框会在悬停时影响li 的width。

改为尝试使用

outline: 1px solid #f88307;

【讨论】：

【解决方案6】：

这是因为你的边框在正常状态和悬停状态下的大小不一样。

在正常状态下，使用您的代码：

border: 1px solid #E5E3E3;
border-left-width: 0;

你有边框（上、右、下、左）（1px、1px、1px、0px）。

但是在悬停状态下，用代码

border: 1px solid #f88307;

你有边框（上、右、下、左）（1px、1px、1px、1px）。所以这意味着在悬停状态下，菜单的总大小要大 1 像素。当您进入悬停状态时，防止它增长的一个技巧是在两种状态下都固定它的大小。例如，您可以替换该行（在正常状态下）：

border-left-width: 0;

按行：

border-left: 1px solid #f7f7f7;

这样您的菜单将始终在每一边都有一个 1 像素的边框。

【讨论】：