html - 如何在菜单上进行边框悬停

Question

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

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

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

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

score 0 · Accepted Answer

0

Change Only the Border color at line 39.

于 2013-07-17T10:14:08.777 回答

score 0 · Accepted Answer

0

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

于 2013-07-17T09:15:15.213 回答

score 0 · Accepted Answer

0

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

而是尝试使用

outline: 1px solid #f88307;

于 2013-07-17T10:42:12.390 回答

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

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

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

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;

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

score 0 · Accepted Answer

0

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

于 2013-07-17T09:31:00.053 回答

6 回答 6