Przesuwanie elementów w wierszu po pogrubieniu po najechaniu na kursor

Jeśli nie można ustawić szerokości, oznacza to, że szerokość zmieni się wraz z pogrubieniem tekstu. Nie ma sposobu, aby tego uniknąć, z wyjątkiem kompromisów, takich jak modyfikowanie wypełnienia/marginesów dla każdego stanu.

Skompromitowanym rozwiązaniem jest udawanie pogrubienia za pomocą text-shadow, na przykład:

a:hover{
  text-shadow:0 0 1px black, 0 0 1px black, 0 0 1px black
}

Powtarzanie 3 razy cienia sprawia, że nie wydaje się zbyt rozmazany.

Innym pomysÅ‚em jest użycie letter-spacing

a {
  letter-spacing: 0.05px
}

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

Jedna linia w jquery:

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

edit: Chociaż może to doprowadzić do rozwiązania, należy wspomnieć, że nie działa on w połączeniu z kodem w oryginalnym poście. "display: inline" musi być zastąpiony zmiennymi parametrami, aby ustawienie szerokości było skuteczne, a menu poziome działało zgodnie z przeznaczeniem.

Przydałoby się coś w stylu

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

A następnie w css po prostu ustaw zawartość zakresu pogrubioną i ukryj ją za pomocą visibility: hidden, aby zachowała swoje wymiary. Następnie możesz dostosować marginesy następujących elementów, aby pasowały prawidłowo.

Nie jestem pewien, czy takie podejście jest przyjazne SEO.

Właśnie rozwiązałem problem z rozwiązaniem "cienia". Wydaje się najbardziej proste i skuteczne.

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

Nie trzeba powtarzać cienia trzy razy (wynik był taki sam dla mnie).

Miałem problem podobny do twojego. Chciałem, aby moje linki stały się pogrubione, gdy najedziesz na nie kursorem, ale nie tylko w menu, ale także w tekście. Jak się domyślasz, byłoby to prawdziwym obowiązkiem zastanawiania się nad wszystkimi różnymi szerokościami. Rozwiązanie jest dość proste:

Utwórz ramkę, która zawiera tekst linku pogrubiony, ale kolorowy, jak twoje tło i prawdziwy link nad nim. Oto przykład z mojej strony:

CSS:

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

Oczywiście trzeba zastąpić #FFFFE0 przez kolor tła Twojej strony. Indeksy z nie wydają się być konieczne, ale i tak je umieszczam (ponieważ element "hypo" pojawi się po elemencie "hyper" w kodzie HTML). Teraz, aby umieścić link na swojej stronie, Dołącz następujące:

HTML:

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

Drugie "tutaj" będzie niewidoczne i ukryte pod twoim linkiem. Ponieważ jest to statyczne pudełko z tekst łącza pogrubiony, reszta tekstu nie przesunie się dłużej, ponieważ jest już przesunięty przed najechaniem kursorem na link.

So long

Radzę nie przełączać czcionek (°) na hover. W tym przypadku to tylko elementy menu poruszają się trochę, ale widziałem przypadki, w których cały akapit zostanie sformatowany, ponieważ poszerzenie powoduje dodatkowe zawijanie słów. Nie chcesz, aby tak się stało, gdy jedyną rzeczą, którą robisz, jest przesunięcie kursora; jeśli nic nie zrobisz, układ strony nie powinien się zmieniać.

Przesunięcie może również wystąpić podczas przełączania między normal i italic. Spróbowałbym zmienić kolory, lub włączyć podkreślenie, jeśli masz miejsce pod tekstem. (podkreślenie powinno pozostać wyraźne od dolnej granicy)

Bylbym boo ' d gdybym uzywal switching fonts dla mojej klasy projektowania formularzy: -)

(°) słowo czcionka jest często nadużywane. "Verdana "jest krojem pisma ," Verdana normal "i" Verdana bold " są różnymi czcionkami tego samego kroju pisma.

Możesz pracować z właściwością "margin":

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

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

Upewnij się, że lewy i prawy margines są wystarczająco duże, aby dodatkowa spacja mogła zawierać pogrubiony tekst. W przypadku długich słów możesz wybrać różne marginesy. To tylko kolejne obejście, ale robi to za mnie.

CSS3 Solution-Experimental

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

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

Tutaj kierujÄ™ tekst wewnÄ…trz znacznika span i obrysowujemy go pikselem za pomocÄ… black, który symuluje styl bold dla danego tekstu.

Zauważ, że ta wÅ‚aÅ›ciwość nie jest obecnie szeroko obsÅ‚ugiwana( podczas pisania tego odpowiedź), tylko Chrome i Firefox wydaje siÄ™ to wspierać. WiÄ™cej informacji na temat obsÅ‚ugi przeglÄ…darki dla text-stroke można znaleźć w CanIUse.

Tylko do dzielenia siÄ™ dodatkowymi rzeczami, możesz użyć -webkit-text-stroke-width: 1px;, jeÅ›li nie chcesz ustawić color dla swojego skoku.

Zamiast tego lubię używać text-shadow. Szczególnie dlatego, że można użyć przejść do animowania cienia tekstu.

Wszystko czego naprawdÄ™ potrzebujesz to:

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

Aby uzyskać pełną nawigację sprawdź ten jsfiddle: https://jsfiddle.net/831r3yrb/

Obsługa przeglądarki i więcej informacji na temat text-shadow: http://www.w3schools.com/cssref/css3_pr_text-shadow.asp

To jest rozwiązanie, które preferuję. Wymaga trochę JS, ale nie potrzebujesz własności tytułu, aby była dokładnie taka sama, a Twój CSS może pozostać bardzo prosty.

$('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>

A co z tym? Darmowe rozwiÄ…zanie 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>

Niezbyt eleganckie rozwiązanie, ale "działa":

a
{
    color: #fff;
}

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

Połączyłem kilka technik powyżej, aby zapewnić coś, co nie jest całkowicie do bani z wyłączonym js i jest jeszcze lepsze z odrobiną jQuery. Teraz, gdy obsługa przeglądarek dla subpikseli list-spacing jest poprawa, to naprawdę miło go używać.

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>

ul {
  list-style-marker: none;
  padding: 0;
}

li {
  display: inline-block;
}

li + li {
  margin-left: 1em;
}

a {
  display: block;
  position: relative;
  text-align: center;
}

a:before, a:after {
  content: attr(aria-label);
  text-decoration: inherit;
}

a:before {
  font-weight: bold;
  visibility: hidden;
}

a:after {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

a:hover:before {
  visibility: visible;
}

a:hover:after {
  display: none;
}

<ul>
  <li>
    <a href="" aria-label="Long-long-long"></a>
  </li><li>
    <a href="" aria-label="or"></a>
  </li><li>
    <a href="" aria-label="Short"></a>
  </li><li>
    <a href="" aria-label="Links"></a>
  </li><li>
    <a href="" aria-label="Here"></a>
  </li>
</ul>

Jeśli nie jesteś przeciwny używaniu Javascript, możesz ustawić odpowiednią szerokość po wyświetleniu strony. Oto jak to zrobiłem (używając prototypu):

$$('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' });
}

Naprawdę nie mogę znieść, gdy ktoś mówi, aby nie robić czegoś w ten sposób, gdy istnieje proste rozwiązanie problemu. Nie jestem pewien co do elementów li, ale właśnie naprawiłem ten sam problem. Mam menu składające się ze znaczników div.

Ustaw znacznik div na "display: inline-block". Inline, więc siedzą obok siebie i blokują, że można ustawić szerokość. Wystarczy ustawić szerokość na tyle szeroką, aby pomieścić pogrubiony tekst i wyrównać środek tekstu.

(Uwaga: To wyglÄ…da na to, że usuwa mój html [poniżej], ale każda pozycja menu miaÅ‚a tag div owiniÄ™ty wokół niego z identyfikatorem corrasponding i nazwÄ… klasy SearchBar_Cateogory. ie: <div id="ROS_SearchSermons" class="SearchBar_Category">

HTML (Miałem tagi kotwicy owinięte wokół każdej pozycji menu, ale nie mogłem przesłać ich jako nowy użytkownik)

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

Możesz również wypróbować marginesy ujemne, jeśli pogrubiony tekst jest szerszy niż zwykły. (nie zawsze) Chodzi więc o to, aby użyć klas zamiast stylizować stan: 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;
}

Oto pomysł na wtyczkę jquery:

for all of the elements that you want bold mouse-over:
    - on mouseover:
        - calculate the width W and center C of the element
        - copy the element and hide the original with visibility:hidden (so it still takes up the same space)
        - make the text of the copied element bold and calculate the new width W2
        - position the element absolute left at C-(W2/2)

Możesz łatwo rozszerzyć tę opcję również o wysokość, dzięki czemu można nieznacznie zwiększyć rozmiar czcionki w mouseover bez obawy o przeskakiwanie zawartości.