Border-Top & Text issue

Question

У меня есть простая панель навигации с элементом наведения.

.navip { 
    float: left; 
    text-decoration: none; 
    font-weight: lighter; 
} 

.navip > a { 
    display: block; 
    color: black; 
    text-decoration: none; 
    font-size: 20px; 
    font-weight: lighter; 
    line-height: 40px; 
} 

.navip > a:hover { 
    border-top: 3px solid blue; 
} 

Когда я нахожусь на a, отображаются границы. Но это немного уменьшило текст. Как я могу это исправить?

JsFiddle: http://jsfiddle.net/w0btkceg/

Редактировать: решаемые его! Мне пришлось увеличить высоту до 45 и добавить « border-top: 3px solid transparent» в класс «navip a».

Answer 1

Просто сделать что-то вроде:

.navip > a { 
    display: block; 
    color: black; 
    text-decoration: none; 
    font-size: 20px; 
    font-weight: lighter; 
    line-height: 40px; 
    border-top: 3px solid transparent;} /* add a transparent border to the a */ 

.navip > a:hover { 
    border-top: 3px solid blue; /* Now just change the color value of the border from transparent to a color on over */ 
} 

See working example here

Решение: Добавить прозрачную границу с в, а затем добавить цвет к нему на парении. Таким образом, текст не будет перемещаться, потому что граница существовала до наведения.

Answer 2

Я использую это для меню:

 .menu-item { 
 
      margin: 5px; 
 
      font-size: 1em; 
 
      font-weight: bold; 
 
      float: left; 
 
      border-top-style: solid; 
 
      border-top-width: 4px; 
 
      border-top-color: transparent; 
 

 
     } 
 
     .menu-item a { 
 
      padding: 5px 0; 
 
      text-decoration: none; 
 
     } 
 
     .menu-item-selected { 
 
      border-top-color: green; 
 
     } 
 
     .menu-item:hover { 
 
      border-top-color: green; 
 
     }

<div class="menu-item"> 
 
    <a href="">Test 1</a> 
 
</div> 
 
<div class="menu-item menu-item-selected"> 
 
    <a href="">Test 2</a> 
 
</div> 
 
<div class="menu-item"> 
 
    <a href="">Test 3</a> 
 
</div> 
 
<div class="menu-item"> 
 
    <a href="">Test 4</a> 
 
</div>

Answer 3

Вы можете попробовать box-sizing:border-box; это будет включать в себя границу в размере коробки и, вероятно, наиболее элегантное решение.

Или мое предыдущее исправление для этого было всего лишь для того, чтобы иметь 10 дополнений для обычной ссылки, а затем набивку: 8px; для версии hover, у которой была граница. Это будет препятствовать размеру границы.

Answer 4

пытаются использовать

.navip > a:hover { 
border-top: 3px solid blue; 
margin-top: -3px; 

}

Answer 5

Хорошо, вы можете объявить border-top property для .navip > a{}, с 0 непрозрачности на нем, а затем при наведении курсора мыши, использовать цвет границы, как этот (check here)

.navip > a { 
    display: block; 
    color: black; 
    text-decoration: none; 
    font-size: 20px; 
    font-weight: lighter; 
    line-height: 37px; /*readjust for the border stuff*/ 
    border-top: 3px solid rgba(255,255,255,.0);/*or transparent*/ 
} 

.navip > a:hover { 
    border-top: 3px solid blue; 
} 

иЛИ вы можете использовать отрицательный запас верхом собственности на зависании или верхнее свойство, если вы можете сделать .navip> а в положение относительно, check it here:

.navip > a { 
    position: relative; 
    display: block; 
    color: black; 
    text-decoration: none; 
    font-size: 20px; 
    font-weight: lighter; 
    line-height: 40px; 
} 

.navip > a:hover { 
    margin-top: -3px;/*or top: -3px*/ 
    border-top: 3px solid blue; 
} 

Answer 6

Вы можете использовать окно-тень вместо границы верхом, как это:

.navip > a:hover { 
    box-shadow: inset 0 3px 0 0 blue; 
} 

Больше информации здесь: MDN Box Shadow