Вбудовані елементи зміщуються, коли зроблено жирним на наведення курсору

Я створив горизонтальне меню за допомогою списків 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псевдоелементі та використовувати тег заголовка як джерело для контенту.

Компрометоване рішення - підробити жирним шрифтом текст, наприклад:

текст-тінь: 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;
}

Просто переконайтеся, що лівий і правий край достатньо великі, щоб додаткове місце містило жирний текст. Для довгих слів ви можете вибрати різні поля. Це просто чергове вирішення проблеми, але робота для мене.

Мені подобається використовувати text-shadow. Тим більше, що ви можете використовувати переходи для анімації тексту-тіні.

Все, що вам потрібно, це:

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

Для повної навігації ознайомтеся з цією jsfiddle: https://jsfiddle.net/831r3yrb/

Підтримка веб-переглядача та додаткова інформація про текст-тінь: http://www.w3schools.com/cssref/css3_pr_text-shadow.asp

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

Зрушення може статися і при переході між нормальним та курсивним. Я б спробував змінити кольори або переключити підкреслення, якщо у вас є місце під текстом. (підкреслення має залишатися чітким від нижньої межі)

Мені було б буд, якби я використовував комутаційні шрифти для свого класу Form Design :-)

(°) Шрифт слова часто не вживають. "Verdana" - це шрифт , "Verdana normal" та "Verdana bold" - це різні шрифти одного шрифту.

Я використовую текст-тіньове рішення, як і деякі інші згадані тут:

text-shadow: 0 0 0.01px;

Різниця полягає в тому, що я не вказую колір тіні, тому це рішення є універсальним для всіх кольорів шрифту.

Альтернативним підходом було б "емуляція" жирного тексту за допомогою текстової тіні. Це має бонус (/ malus, залежно від вашого випадку) також працювати над піктограмами шрифту.

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

Якийсь хакі, хоча це рятує вас від дублювання тексту (що корисно, якщо їх багато, як це було в моєму випадку).

Це рішення, яке я віддаю перевагу. Це вимагає трохи JS, але вам не потрібно, щоб ваше властивість заголовка було точно таким же, і ваш 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>

Краще використовувати :: раніше, а не :: після цього:

.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, ви можете встановити відповідну ширину, коли сторінка відображається. Ось як я це зробив (використовуючи прототип):

$$('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 з ідентифікатором corrasponding та іменем класу 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;
}

Ви також можете спробувати негативні поля, якщо жирний текст ширший від звичайного. (не завжди) Отже, ідея полягає у використанні класів, а не для стилю стану: наведення курсора.

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;
}

Сподіваюся, я міг допомогти!