Смещение встроенных элементов при выделении жирным шрифтом при наведении

Я создал горизонтальное меню, используя списки HTML и CSS. Все работает как надо, кроме случаев, когда вы наводите курсор мыши на ссылки. Видите ли, я создал состояние жирного наведения для ссылок, и теперь ссылки меню смещаются из-за разницы в жирном размере.

Я столкнулся с той же проблемой, что и этот пост SitePoint . Однако у поста нет правильного решения. Я искал везде решение и не могу его найти. Конечно, я не могу быть единственным, кто пытается это сделать.

У кого-нибудь есть идеи?

PS: я не знаю ширину текста в пунктах меню, поэтому я не могу просто установить ширину элементов li.

.nav { margin: 0; padding: 0; }
.nav li { 
    list-style: none; 
    display: inline; 
    border-left: #ffffff 1px solid; 
}
.nav li a:link, .nav li a:visited { 
    text-decoration: none; 
    color: #000; 
    margin-left: 8px; 
    margin-right: 5px; 
}
.nav li a:hover{ 
    text-decoration: none; 
    font-weight: bold; 
}
.nav li.first { border: none; }

<ul class="nav">
    <li class="first"><a href="#">item 0</a></li>
    <li><a href="#">item 1</a></li>
    <li><a href="#">item 2</a></li>
    <li><a href="#">item 3</a></li>
    <li><a href="#">item 4</a></li>
</ul>

li {
    display: inline-block;
    font-size: 0;
}
li a {
    display:inline-block;
    text-align:center;
    font: normal 16px Arial;
    text-transform: uppercase;
}
a:hover {
    font-weight:bold;
}
a::before {
    display: block;
    content: attr(title);
    font-weight: bold;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

<ul>
    <li><a href="#" title="height">height</a></li>
    <li><a href="#" title="icon">icon</a></li>
    <li><a href="#" title="left">left</a></li>
    <li><a href="#" title="letter-spacing">letter-spacing</a></li>
    <li><a href="#" title="line-height">line-height</a></li>
</ul>

Проверьте рабочий пример на JSfiddle . Идея состоит в том, чтобы зарезервировать пространство для :hoverсодержимого, выделенного жирным шрифтом (или любых стилей состояния) в :beforeпсевдоэлементе, и использовать тег заголовка в качестве источника содержимого.

Скомпрометированное решение - подделать жирный шрифт с помощью text-shadow, например:

тень текста: 0 0 0.01px черный;

Для лучшего сравнения я создал эти примеры:

a, li {
  color: black;
  text-decoration: none;
  font: 18px sans-serif;
  letter-spacing: 0.03em;
}
li {
  display: inline-block;
  margin-right: 20px;
  color: gray;
  font-size: 0.7em;
}
.bold-x1 a.hover:hover,
.bold-x1 a:not(.hover) {
  text-shadow: 0 0 .01px black;
}
.bold-x2 a.hover:hover,
.bold-x2 a:not(.hover){
  text-shadow: 0 0 .01px black, 0 0 .01px black;
}
.bold-x3 a.hover:hover,
.bold-x3 a:not(.hover){
  text-shadow: 0 0 .01px black, 0 0 .01px black, 0 0 .01px black;
}
.bold-native a.hover:hover,
.bold-native a:not(.hover){
  font-weight: bold;
}

.bold-native li:nth-child(4),
.bold-native li:nth-child(5){
 margin-left: -6px;
 letter-spacing: 0.01em;
}

<ul class="bold-x1">
  <li><a class="hover" href="#">Home</a></li>
  <li><a class="hover" href="#">Products</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
  <li>Bold (text-shadow x1)</li>
</ul>
<ul class="bold-x2">
  <li><a class="hover" href="#">Home</a></li>
  <li><a class="hover" href="#">Products</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
  <li>Extra Bold (text-shadow x2)</li>
</ul>
<ul class="bold-native">
  <li><a class="hover" href="#">Home</a></li>
  <li><a class="hover" href="#">Products</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
  <li>Bold (native)</li>
</ul>
<ul class="bold-x3">
  <li><a class="hover" href="#">Home</a></li>
  <li><a class="hover" href="#">Products</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
  <li>Black (text-shadow x3)</li>
</ul>

Переход к text-shadowдействительно низкому значению для blur-radiusсделает эффект размытия не столь очевидным.

В общем, чем больше вы повторяете, text-shadowтем смелее будет текст, но в то же время теряете первоначальную форму букв.

Я должен предупредить вас, что установка blur-radiusдробей не будет отображаться одинаково во всех браузерах! Safari, например, нужны большие значения, чтобы отобразить его так же, как в Chrome.

Если вы не можете установить ширину, то это означает, что ширина будет меняться, когда текст становится жирным. Нет способа избежать этого, кроме как путем компромиссов, таких как изменение отступов / полей для каждого состояния.

Другая идея использует letter-spacing

li, a { display: inline-block; }
a {
  font-size: 14px;
  padding-left: 10px;
  padding-right: 10px;
  letter-spacing: 0.235px
}

a:hover, a:focus {
  font-weight: bold;
  letter-spacing: 0
}

<ul>
  <li><a href="#">item 1</a></li>
  <li><a href="#">item 2</a></li>
  <li><a href="#">item 3</a></li>
</ul>

Одна строка в jquery:

$('ul.nav li a').each(function(){
    $(this).parent().width($(this).width() + 4);
});

редактировать: хотя это может привести к решению, следует отметить, что оно не работает в сочетании с кодом в исходном посте. «display: inline» должен быть заменен плавающими параметрами, чтобы настройка ширины была эффективной и чтобы горизонтальное меню работало как задумано.

Решение CSS3 - Экспериментальное

Мысль поделиться другим решением, которое никто не предложил здесь. Есть свойство под названием, text-strokeкоторое будет полезно для этого.

p span:hover {
  -webkit-text-stroke: 1px black;
}

<p>Some stuff, <span>hover this,</span> it's cool</p>

Здесь я нацеливаюсь на текст внутри spanтега, и мы обводим его пикселем, blackкоторый имитирует boldстиль для этого конкретного текста.

Обратите внимание, что это свойство широко не поддерживается, на данный момент (при написании этого ответа) только Chrome и Firefox, кажется, поддерживают это. Для получения дополнительной информации о поддержке браузера text-strokeвы можете обратиться к CanIUse .

Просто для того, чтобы поделиться некоторыми дополнительными вещами, вы можете использовать, -webkit-text-stroke-width: 1px;если вы не хотите, чтобы установить colorдля вашего удара.

Вы можете использовать что-то вроде

<ul>
   <li><a href="#">Some text<span><br />Some text</span></a></li>
</ul>

а затем в вашем CSS просто установите содержимое диапазона жирным шрифтом и скройте его с видимостью: скрытый, чтобы он сохранял свои размеры. Затем вы можете отрегулировать поля следующих элементов, чтобы они подходили по размеру.

Хотя я не уверен, что этот подход оптимизирован для SEO.

Я только что решил проблему с "теневым" решением. Кажется, самый простой и эффективный.

nav.mainMenu ul li > a:hover, nav.mainMenu ul li.active > a {
    text-shadow:0 0 1px white;
}

Не нужно повторять тень три раза (результат был для меня одинаковым).

У меня была проблема, похожая на вашу. Я хотел, чтобы мои ссылки выделялись жирным шрифтом, когда вы наводите на них курсор, но не только в меню, но и в тексте. Как вы можете догадаться, это была бы настоящая рутина, вычисляющая все ширины. Решение довольно простое:

Создайте коробку, которая содержит текст ссылки, выделенный жирным шрифтом, но цветной, как фон, но реальная ссылка над ним. Вот пример с моей страницы:

CSS:

.hypo { font-weight: bold; color: #FFFFE0; position: static; z-index: 0; }
.hyper { position: absolute; z-index: 1; }

Конечно, вам нужно заменить # FFFFE0 на цвет фона вашей страницы. По-видимому, z-индексы не нужны, но я все равно их помещаю (так как элемент «гипо» будет появляться после элемента «гипер» в HTML-коде). Теперь, чтобы разместить ссылку на своей странице, добавьте следующее:

HTML:

You can find foo <a href="http://bar.com" class="hyper">here</a><span class="hypo">here</span>

Второе «здесь» будет невидимым и скрытым под вашей ссылкой. Поскольку это статическое поле, в котором текст ссылки выделен жирным шрифтом, остальная часть текста больше не будет смещаться, поскольку она уже смещена до того, как вы наведете курсор на ссылку.

Надеюсь, я смог помочь :).

Пока

Вы можете работать со свойством margin.

li a {
  margin: 0px 5px 0px 5px;
}

li a:hover {
  margin: 0;
  font-weight: bold;
}

Просто убедитесь, что левый и правый поля достаточно велики, чтобы дополнительное пространство могло содержать жирный текст. Для длинных слов вы можете выбрать разные поля. Это просто еще один обходной путь, но он делает всю работу за меня.

Мне нравится использовать текстовую тень вместо этого. Тем более, что вы можете использовать переходы для анимации текста-тени.

Все, что вам действительно нужно, это:

a {
  transition: text-shadow 1s;
}
a:hover {
  text-shadow: 1px 0 black;
}

Для полной навигации проверьте это jsfiddle: https://jsfiddle.net/831r3yrb/

Поддержка браузера и дополнительная информация о text-shadow: http://www.w3schools.com/cssref/css3_pr_text-shadow.asp

Я бы посоветовал не переключать шрифты (°) при наведении курсора. В данном случае это всего лишь несколько пунктов меню, но я видел случаи, когда весь абзац переформатируется, потому что расширение вызывает дополнительную перенос слов. Вы не хотите, чтобы это произошло, когда единственное, что вы делаете, это перемещаете курсор; если вы ничего не делаете, макет страницы не должен меняться.

Сдвиг также может произойти при переключении между обычным и курсивом. Я бы попробовал изменить цвет или переключить подчеркивание, если у вас есть место под текстом. (подчеркивание должно оставаться четким от нижней границы)

Я был бы воодушевлен, если бы использовал переключающие шрифты для своего класса Form Design :-)

(°) Шрифт слова часто используется неправильно. «Verdana» - это шрифт , «Verdana normal» и «Verdana bold» - это разные шрифты одного и того же шрифта.

Я использую решение для тени текста, как некоторые другие, упомянутые здесь:

text-shadow: 0 0 0.01px;

разница в том, что я не указываю цвет тени, поэтому это решение универсально для всех цветов шрифта.

Альтернативный подход заключается в том, чтобы «эмулировать» жирный текст с помощью text-shadow. Это имеет бонус (/ malus, в зависимости от вашего случая), чтобы работать также на иконки шрифтов.

   nav li a:hover {
      text-decoration: none;
      text-shadow: 0 0 1px; /* "bold" */
   }

Что-то вроде хаки, хотя это спасает вас от дублирования текста (что полезно, если много, как это было в моем случае).

Это решение, которое я предпочитаю. Это требует немного JS, но вам не нужно, чтобы ваше свойство title было таким же, и ваш CSS может оставаться очень простым.

$('ul a').each(function() {
  $(this).css({
    'padding-left': 0,
    'padding-right': 0,
    'width': $(this).outerWidth()
  });
});

li, a { display: inline-block; }
a {
  padding-left: 10px;
  padding-right: 10px;
  text-align: center; /* optional, smoother */
}
a:hover { font-weight: bold; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li><a href="#">item 1</a></li>
  <li><a href="#">item 2</a></li>
  <li><a href="#">item 3</a></li>
</ul>

Как насчет этого? JavaScript - бесплатное решение CSS3.

http://jsfiddle.net/u1aks77x/1/

ul{}
li{float:left; list-style-type:none; }
a{position:relative; padding-right: 10px; text-decoration:none;}
a > .l1{}
a:hover > .l1{visibility:hidden;}
a:hover > .l2{display:inline;}
a > .l2{position: absolute; left:0; font-weight:bold; display:none;}

<ul>
  <li><a href="/" title="Home"><span class="l1">Home</span><span class="l2">Home</span></a></li>
  <li><a href="/" title="Contact"><span class="l1">Contact</span><span class="l2">Contact</span></a></li>
  <li><a href="/" title="Sitemap"><span class="l1">Sitemap</span><span class="l2">Sitemap</span></a></li>
</ul>

Не очень элегантное решение, но «работает»:

a
{
    color: #fff;
}

a:hover
{
    text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
}

Я объединил кучу методов, описанных выше, чтобы обеспечить что-то, что не полностью отстой с отключенным js и даже лучше с небольшим количеством jQuery. Теперь, когда поддержка браузерами субпиксельного межбуквенного интервала улучшается, его очень приятно использовать.

jQuery(document).ready(function($) {
  $('.nav a').each(function(){
      $(this).clone().addClass('hoverclone').fadeTo(0,0).insertAfter($(this));
    var regular = $(this);
    var hoverclone = $(this).next('.hoverclone');
    regular.parent().not('.current_page_item').hover(function(){
      regular.filter(':not(:animated)').fadeTo(200,0);
      hoverclone.fadeTo(150,1);
    }, function(){
      regular.fadeTo(150,1);
      hoverclone.filter(':not(:animated)').fadeTo(250,0);
    });
  });
});

ul {
  font:normal 20px Arial;
  text-align: center;
}
li, a {
  display:inline-block;
  text-align:center;
}
a {
  padding:4px 8px;
  text-decoration:none;
  color: #555;
}

.nav a {
  letter-spacing: 0.53px; /* adjust this value per font */
}
.nav .current_page_item a,
.nav a:hover {
  font-weight: bold;
  letter-spacing: 0px;
}
.nav li {
  position: relative;
}
.nav a.hoverclone {
  position: absolute;
  top:0;
  left: 0;
  white-space: nowrap;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="nav">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li class="current_page_item"><a  href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
  <li><a href="#">Item 5</a></li>
</ul>

Лучше использовать :: before вместо a :: after так:

.breadcrumb {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}

.breadcrumb li, 
.breadcrumb li a {
  display: inline-block;
}

.breadcrumb li:not(:last-child)::after {
  content: '>'; /* or anything else */
  display: inline-block;
}

.breadcrumb a:hover {
  font-weight: bold;
}

.breadcrumb a::before {
  display: block;
  content: attr(data-label);
  font-weight: bold;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

<ul class="breadcrumb">
  <li><a data-label="one" href="https://www.google.fr/" target="_blank">one</a></li>
  <li><a data-label="two" href="https://duckduckgo.com/" target="_blank">two</a></li>
  <li><a data-label="three" href="#">three</a></li>
</ul>

Для получения более подробной информации: https://jsfiddle.net/r25foavy/

Я исправил меню при наведении смелого успеха. Это поддерживает отзывчивый, это мой код:

(function ($) {
'use strict';

$(document).ready(function () {
    customWidthMenu();
});
$(window).resize(function () {
    customWidthMenu();
});
function customWidthMenu() {
    $('ul.nav li a').each(function() {
        $(this).removeAttr('style');
        var this = $(this);
        var width = this.innerWidth();
        this.css({'width': width + 12});
    });
}})(jQuery);

Если вы не против использования Javascript, вы можете установить правильную ширину после показа страницы. Вот как я это сделал (используя Prototype):

$$('ul.nav li').each(this.setProperWidth);

setProperWidth: function(li)
{
  // Prototype's getWidth() includes padding, so we 
  // have to subtract that when we set the width.
  var paddingLeft = li.getStyle('padding-left'),
      paddingRight = li.getStyle('padding-right');

  // Cut out the 'px' at the end of each padding
  paddingLeft = paddingLeft.substring(0,paddingLeft.length-2);
  paddingRight = paddingRight.substring(0,paddingRight.length-2);

  // Make the li bold, set the width, then unbold it
  li.setStyle({ fontWeight: 'bold' });
  li.setStyle({ width: (li.getWidth() - paddingLeft - paddingRight) + 'px'});
  li.setStyle({ fontWeight: 'normal', textAlign: 'center' });
}

Я действительно не могу этого вынести, когда кто-то говорит вам не делать что-то таким образом, когда есть простое решение проблемы. Я не уверен насчет элементов li, но я просто исправил ту же проблему. У меня есть меню, состоящее из тегов div.

Просто установите тег div в «display: inline-block». Встроенный, чтобы они сидели рядом друг с другом и заблокировать, чтобы вы могли установить ширину. Просто установите ширину, достаточную для размещения выделенного текста и выравнивания текста по центру.

(Примечание. Похоже, что он удаляет мой html [ниже], но каждый элемент меню имеет тег div, обернутый вокруг него с соответствующим идентификатором и именем класса SearchBar_Cateogory. Т.е. <div id="ROS_SearchSermons" class="SearchBar_Category">

HTML (у меня были привязанные теги вокруг каждого пункта меню, но я не смог отправить их как новый пользователь)

<div id="ROS_SearchSermons" class="SearchBar_Cateogry bold">Sermons</div>|
<div id="ROS_SearchIllustrations" class="SearchBar_Cateogry">Illustrations</div>|
<div id="ROS_SearchVideos" class="SearchBar_Cateogry">Videos</div>|
<div id="ROS_SearchPowerPoints" class="SearchBar_Cateogry">PowerPoints</div>|
<div id="ROS_SearchScripture" class="SearchBar_Cateogry">Scripture</div>|

CSS:

#ROS_SearchSermons { width: 75px; }
#ROS_SearchIllustrations { width: 90px; }
#ROS_SearchVideos { width: 55px; }
#ROS_SearchPowerPoints { width: 90px; }
#ROS_SearchScripture { width: 70px; }

.SearchBar_Cateogry
{
    display: inline-block;
    text-align:center;
}

попробуй это:

.nav {
  font-family: monospace;
}

Вы также можете попробовать отрицательные поля, если полужирный текст шире обычного. (не всегда) Так что идея состоит в том, чтобы использовать классы вместо того, чтобы стилизовать состояние: hover.

JQuery:

 $(".nav-main .navbar-collapse > ul > li > a").hover(function() {
    var originalWidth = $(this).outerWidth();

    $(this).parent().addClass("hover");
    $(this).css({
       "margin-left": -(($(this).outerWidth() - originalWidth) / 2),
       "margin-right": -(($(this).outerWidth() - originalWidth) / 2)
    });
 },
 function() {
    $(this).removeAttr("style");
    $(this).parent().removeClass("hover");
 });

CSS:

ul > li > a {
    font-style: normal;
}

ul > li > a.hover {
    font-style: bold;
}

Я надеюсь, что смогу помочь!