Spostamento degli elementi incorporati quando resi audaci al passaggio del mouse

Ho creato un menu orizzontale utilizzando elenchi HTML e CSS. Tutto funziona come dovrebbe, tranne quando si passa con il mouse sopra i collegamenti. Vedete, ho creato uno stato di passaggio del mouse in grassetto per i collegamenti e ora i collegamenti di menu cambiano a causa della differenza di dimensioni in grassetto.

Riscontro lo stesso problema di questo post di SitePoint . Tuttavia, il post non ha una soluzione adeguata. Ho cercato ovunque una soluzione e non riesco a trovarne una. Sicuramente non posso essere il solo a provare a farlo.

Qualcuno ha qualche idea?

PS: Non conosco la larghezza del testo nelle voci del menu, quindi non posso semplicemente impostare la larghezza delle voci 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>

Controlla l'esempio funzionante su JSfiddle . L'idea è di riservare spazio per il contenuto in grassetto (o qualsiasi :hoverstile di stato) nello :beforepseudo elemento e usando il tag del titolo come fonte di contenuto.

Una soluzione compromessa è falsare il grassetto con text-shadow, ad esempio:

ombra del testo: 0 0 0,01 px nero;

Per un migliore confronto ho creato questi esempi:

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>

Passare a text-shadowun valore veramente basso per blur-radiusrenderà l'effetto di sfocatura non così evidente.

In generale, più ripeti, text-shadowpiù audace diventerà il testo ma allo stesso tempo perdendo la forma originale delle lettere.

Dovrei avvertirti che l'impostazione delle blur-radiusfrazioni non renderà lo stesso in tutti i browser! Safari, ad esempio, ha bisogno di valori più grandi per renderlo allo stesso modo di Chrome.

Se non puoi impostare la larghezza, significa che la larghezza cambierà quando il testo diventa grassetto. Non c'è modo di evitarlo, se non attraverso compromessi come la modifica del riempimento / margini per ogni stato.

Un'altra idea sta usando 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>

Una riga in jquery:

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

modifica: anche se questo può portare alla soluzione, si dovrebbe menzionare che non funziona in combinazione con il codice nel post originale. "display: inline" deve essere sostituito con parametri fluttuanti affinché un'impostazione della larghezza sia efficace e quel menu orizzontale funzioni come previsto.

Soluzione CSS3 - Sperimentale

Ho pensato di condividere una soluzione diversa che nessuno ha suggerito qui. C'è una proprietà chiamata text-strokeche sarà utile per questo.

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

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

Qui, sto prendendo di mira il testo all'interno del spantag e lo accarezziamo con un pixel con il blackquale simuleremo lo boldstile per quel particolare testo.

Si noti che questa proprietà non è ampiamente supportata, al momento (mentre si scrive questa risposta), solo Chrome e Firefox sembrano supportarlo. Per ulteriori informazioni sul supporto del browser per text-stroke, è possibile fare riferimento a CanIUse .

Solo per condividere alcune cose extra, puoi usarlo -webkit-text-stroke-width: 1px;se non stai cercando di impostare un colorper il tuo colpo.

Potresti usare qualcosa come

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

e poi nel tuo CSS basta impostare il contenuto dell'intervallo in grassetto e nasconderlo con visibilità: nascosto, in modo che mantenga le sue dimensioni. Quindi è possibile regolare i margini dei seguenti elementi per adattarlo correttamente.

Non sono sicuro se questo approccio sia SEO friendly.

Ho appena risolto il problema con la soluzione "shadow". Sembra il più semplice ed efficace.

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

Non c'è bisogno di ripetere l'ombra tre volte (il risultato è stato lo stesso per me).

Ho avuto un problema simile al tuo. Volevo che i miei collegamenti diventassero audaci quando ci si passa sopra con il mouse ma non solo nel menu ma anche nel testo. Come puoi immaginare, sarebbe una vera seccatura capire tutte le diverse larghezze. La soluzione è piuttosto semplice:

Crea una casella che contenga il testo del link in grassetto ma colorato come il tuo sfondo e al di sopra del tuo vero link. Ecco un esempio dalla mia pagina:

CSS:

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

Ovviamente devi sostituire # FFFFE0 con il colore di sfondo della tua pagina. Gli indici z non sembrano essere necessari, ma li inserisco comunque (poiché l'elemento "ipo" si verificherà dopo l'elemento "iper" nel codice HTML). Ora, per inserire un link nella tua pagina, includi quanto segue:

HTML:

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

Il secondo "qui" sarà invisibile e nascosto sotto il tuo link. Poiché si tratta di una casella statica con il testo del collegamento in grassetto, il resto del testo non si sposterà più poiché è già spostato prima di passare con il mouse sopra il collegamento.

Spero di essere stato in grado di aiutare :).

Così lungo

Puoi lavorare con la proprietà "margin":

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

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

Assicurati solo che il margine sinistro e destro siano abbastanza grandi in modo che lo spazio extra possa contenere il testo in grassetto. Per parole lunghe, potresti scegliere margini diversi. È solo un'altra soluzione ma fare il lavoro per me.

Mi piace usare text-shadow invece. Soprattutto perché puoi usare le transizioni per animare l'ombra del testo.

Tutto ciò di cui hai veramente bisogno è:

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

Per una navigazione completa dai un'occhiata a questo jsfiddle: https://jsfiddle.net/831r3yrb/

Supporto del browser e maggiori informazioni su text-shadow: http://www.w3schools.com/cssref/css3_pr_text-shadow.asp

Vorrei sconsigliare di cambiare carattere (°) al passaggio del mouse. In questo caso sono solo le voci di menu che si spostano un po ', ma ho visto casi in cui il paragrafo completo viene riformattato perché l'ampliamento provoca una parola in più. Non vuoi che ciò accada quando l'unica cosa che fai è spostare il cursore; se non fai nulla, il layout della pagina non dovrebbe cambiare.

Lo spostamento può anche avvenire quando si passa tra normale e corsivo. Proverei a cambiare i colori, o deselezionerei sottolineato se hai spazio sotto il testo. (la sottolineatura dovrebbe rimanere libera dal bordo inferiore)

Sarei fischiato se usassi il cambio di font per la mia classe di Design Form :-)

(°) Il carattere parola viene spesso utilizzato in modo improprio. "Verdana" è un carattere tipografico , "Verdana normale" e "Verdana grassetto" sono caratteri diversi dello stesso carattere tipografico.

Uso la soluzione di text-shadow come alcuni altri menzionati qui:

text-shadow: 0 0 0.01px;

la differenza è che non specifico il colore dell'ombra, quindi questa soluzione è universale per tutti i colori dei caratteri.

Un approccio alternativo sarebbe quello di "emulare" il testo in grassetto tramite text-shadow. Questo ha il bonus (/ malus, a seconda del caso) di lavorare anche sulle icone dei caratteri.

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

Kinda hacky, anche se ti salva dalla duplicazione del testo (che è utile se è molto, come nel mio caso).

Questa è la soluzione che preferisco. Richiede un po 'di JS ma non è necessario che la proprietà del titolo sia esattamente la stessa e il CSS può rimanere molto semplice.

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

Che dire di questo? Una soluzione javascript - CSS3 gratuita.

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>

Soluzione non molto elegante, ma "funziona":

a
{
    color: #fff;
}

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

Ho combinato un sacco di tecniche sopra per fornire qualcosa che non fa schifo con js spento ed è ancora meglio con un po 'di jQuery. Ora che il supporto dei browser per la spaziatura delle lettere subpixel sta migliorando, è davvero bello usarlo.

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>

È meglio usare a :: before invece a :: after in questo modo:

.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>

Per maggiori dettagli: https://jsfiddle.net/r25foavy/

Ho corretto il menu quando ho un successo coraggioso. Supporta reattivo, questo è il mio codice:

(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);

Se non sei contrario all'utilizzo di Javascript, puoi impostare la larghezza corretta una volta visualizzata la pagina. Ecco come l'ho fatto (usando 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' });
}

Davvero non lo sopporto quando qualcuno ti dice di non fare qualcosa in quel modo quando c'è una soluzione semplice al problema. Non sono sicuro degli elementi li, ma ho appena risolto lo stesso problema. Ho un menu composto da tag div.

Basta impostare il tag div su "display: inline-block". In linea in modo che si siedano uno accanto all'altro e si blocchino in modo da poter impostare una larghezza. Basta impostare la larghezza abbastanza ampia da contenere il testo in grassetto e allineare il centro del testo.

(Nota: sembra che stia rimuovendo il mio html [sotto], ma ogni voce di menu aveva un tag div avvolto attorno ad esso con l'ID corrispondente e il nome della classe SearchBar_Cateogory. Ie: <div id="ROS_SearchSermons" class="SearchBar_Category">

HTML (avevo tag di ancoraggio racchiusi in ciascuna voce di menu, ma non sono stato in grado di inviarli come nuovo utente)

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

prova questo:

.nav {
  font-family: monospace;
}

Puoi provare anche i margini negativi se il testo in grassetto è più largo del normale. (non sempre) Quindi l'idea è di usare le classi invece di definire lo stato: 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;
}

Spero di poterti aiutare!