Inline-Elemente, wenn ein Schalten aus fett auf schweben
https://stackoverflow.com/questions/556153
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Ich habe ein horizontales Menü einen HTML-Listen und CSS. Alles funktioniert, wie es sollte, außer wenn Sie über die Links schweben. Sie sehen, ich einen mutigen Hover Zustand für die Links erstellt, und jetzt sind die Menü-Links verschieben wegen der fett Größenunterschied.
Ich begegne das gleiche Problem wie dieser Sitepoint Post . Allerdings ist die Post nicht die richtige Lösung. Ich habe überall nach einer Lösung gesucht und nicht finden kann. Sicher kann ich nicht das einzige sein, die versucht, dies zu tun.
Hat jemand irgendwelche Ideen?
P. S: Ich weiß nicht die Breite des Textes in den Menüpunkten, so kann ich nicht nur die Breite der li Elemente einstellen
.
.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>
Lösung
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::after {
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>
Überprüfen Sie das Arbeitsbeispiel auf JSfiddle .
Die Idee ist, Platz zu reservieren für bolded (oder irgendwelche :hover Zustand Stile) Inhalt in :after Pseudoelement und mit Titel-Tag als Quelle für den Inhalt.
Andere Tipps
Eine kompromittiert Lösung ist zu fälschen fett mit text-shadow, z:
text-shadow: 0 0 0.01px schwarz;
Zum besseren Vergleich habe ich diese Beispiele:
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>
Passing wirklich niedrigen Wert text-shadow für blur-radius den Unschärfeeffekt macht nicht so offensichtlich.
Generell desto mehr wiederholen text-shadow der kühne Ihr Text bekommen, aber in der gleichen Zeit ursprüngliche Form der Buchstaben zu verlieren.
Ich sollte Sie warnen, dass die blur-radius zu Fraktionen Einstellung gehen nicht das gleiche in allen Browsern zu machen! Safari zum Beispiel größere Werte müssen sie die gleiche Art und Weise machen Chrome tun wird.
Wenn Sie nicht die Breite einstellen kann, dann bedeutet, dass die Breite ändern, wie der Text fett wird. Es gibt keine Möglichkeit, dies zu vermeiden, es sei denn durch Kompromisse wie die Polsterung / Margen für jeden Zustand zu ändern.
Eine andere Idee ist, mit letter-spacing
a {
letter-spacing: 0.05px
}
a:hover, a:focus {
font-weight: bold;
letter-spacing: 0
}
Ein Linie in jquery:
$('ul.nav li a').each(function(){
$(this).parent().width($(this).width() + 4);
});
edit: Während diese über die Lösung bringen können, sollte man erwähnen, dass es nicht mit dem Code in der ursprünglichen Nachricht in Verbindung funktioniert. . „Display: inline“ wird mit Fließparameter für eine Breite-Einstellung ersetzt werden, um wirksam zu sein, und dass horizontales Menü wie beabsichtigt zu arbeiten
Sie könnten somehting wie verwenden
<ul>
<li><a href="#">Some text<span><br />Some text</span></a></li>
</ul>
und dann in Ihrem CSS setzt nur die Spanne Inhalt fett und versteckt es mit Sichtbarkeit: versteckt, so dass es seine Abmessungen hält. Dann können Sie Ränder der folgenden Elemente anpassen, damit es richtig passen.
Ich bin nicht sicher, ob dieser Ansatz SEO freundlich ist though.
Ich löste nur das Problem mit der „Schatten“ Lösung. Es scheint, die einfach und effektiv.
nav.mainMenu ul li > a:hover, nav.mainMenu ul li.active > a {
text-shadow:0 0 1px white;
}
Keine Notwendigkeit, den Schatten dreimal zu wiederholen (Ergebnis war das gleiche für mich).
CSS3-Lösung - Experimental
(Gefälschte Kühnheit)
Das Denken eine andere Lösung zu teilen, die niemand hier vorgeschlagen. Es gibt eine Eigenschaft namens text-stroke, die für dieses handliche sein wird.
p span:hover {
-webkit-text-stroke: 1px black;
}<p>Some stuff, <span>hover this,</span> it's cool</p>
Hier bin ich gezielt den Text innerhalb des span Tag und wir streicheln durch ein Pixel mit black die bold Stil für diesen bestimmten Text simulieren.
Beachten Sie, dass diese Eigenschaft nicht weit unterstützt wird, ab sofort (während dieser Antwort zu schreiben), nur Chrome und Firefox, dies zu unterstützen scheinen. Weitere Informationen über die Browser-Unterstützung für text-stroke, können Sie beziehen sich auf CanIUse .
Nur für einige zusätzliche Sachen zu teilen, können Sie -webkit-text-stroke-width: 1px; verwenden, wenn Sie keinen color für Ihren Hub einzustellen suchen.
Ich hatte ein ähnliches Problem wie bei Ihnen. Ich wollte meine Links fett zu bekommen, wenn man über sie schwebt aber nicht nur im Menü, sondern auch im Text. Wie Sie es wäre sehr mühsam, all die verschiedenen Breiten herauszufinden erraten cen aus. Die Lösung ist recht einfach:
Erstellen Sie eine Box, die den Link-Text in Fettschrift enthält aber farbig wie Ihr Hintergrund und aber Ihre wirkliche Verbindung darüber. Hier ist ein Beispiel von meiner Seite:
CSS:
.hypo { font-weight: bold; color: #FFFFE0; position: static; z-index: 0; }
.hyper { position: absolute; z-index: 1; }
Natürlich müssen Sie # FFFFE0 von der Hintergrundfarbe Ihrer Seite zu ersetzen. Der z-Indizes scheint nicht notwendig zu sein, aber ich habe sie trotzdem (als „Hypo“ Element wird nach dem „hyper“ Elemente im HTML-Code auftreten). Nun setzt einen Link auf Ihrer Seite, ist die folgende:
HTML:
You can find foo <a href="http://bar.com" class="hyper">here</a><span class="hypo">here</span>
Die zweite „hier“ wird unter Ihrem Link unsichtbar und versteckt sein. Da es sich um ein statisches Feld mit Ihr Link Text fett, der Rest des Textes wird nicht mehr verschieben, wie es bereits, bevor Sie über den Link bewegen verschoben wird.
Hope konnte ich helfen.)
So long
Ich würde das Abraten Schalen Schriftarten (°) auf schweben. In diesem Fall ist es nur die Menüpunkte ein wenig bewegen, aber ich habe Fälle gesehen, wo der komplette Absatz neu formatiert wird, da die Erweiterung einen zusätzlichen Zeilenumbruch verursacht. Sie wollen nicht, um zu sehen, dies geschieht, wenn das einzige, was Sie tun, um den Cursor bewegen ist; wenn Sie nichts tun, das Seitenlayout nicht ändern sollte.
Die Verschiebung kann auch passieren, wenn zwischen normalen und kursiven wechseln. Ich würde versuchen, wechselnde Farben, oder umschalten unterstreichen, wenn Sie Raum unter dem Text haben. (Unterstrichen sollte von der unteren Grenze klar bleiben)
würde ich boo'd, wenn ich verwende Schriften Schalte für meine Form Design-Klasse: -)
(°) Das Wort der Schrift wird oft missbraucht. "Verdana" ist eine Schrift "Verdana normal" und "Verdana bold" verschieden ist Schriftarten der gleichen Schrift.
Sie können mit dem "Rand" Eigenschaft arbeiten:
li a {
margin: 0px 5px 0px 5px;
}
li a:hover {
margin: 0;
font-weight: bold;
}
Nur sicher, dass die linke und rechte Ränder sind groß genug, so dass der zusätzliche Raum den fett gedruckten Text enthalten kann. Für lange Wörter, können Sie unterschiedliche Ränder wählen. Es ist nur eine andere Problemumgehung aber machen die Arbeit für mich.
Ich mag stattdessen text-shadow verwenden. Vor allem, weil man Übergänge verwenden kann, um text-shadow zu animieren.
Alles, was Sie wirklich brauchen, ist:
a {
transition: text-shadow 1s;
}
a:hover {
text-shadow: 1px 0 black;
}
Für eine vollständige Navigation dieses jsfiddle check out: https://jsfiddle.net/831r3yrb/
Browser-Unterstützung und weitere Informationen über text-shadow: http://www.w3schools.com/cssref/css3_pr_text-shadow.asp
Dies ist die Lösung, die ich bevorzuge. Es erfordert ein wenig JS aber Sie nicht Ihre Eigenschaft title müssen sein kann genau die gleichen und CSS bleibt sehr einfach.
$('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>
Was ist das? Eine Javascript -. CSS3 freie Lösung
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>
Nicht sehr elegante Lösung, aber "Werke":
a
{
color: #fff;
}
a:hover
{
text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
}
Ich habe eine Reihe von Techniken kombiniert oben etwas zu schaffen, das nicht völlig nicht saugt mit js ausgeschaltet und ist noch besser mit einem wenig jQuery. Nun, da Browser unterstützen für Subpixel-Zeichenabstand verbessert sich, es ist wirklich schön, es zu benutzen.
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>
Ich verwende text-shadow Lösung wie einige andere hier erwähnt:
text-shadow: 0 0 0.01px;
Der Unterschied ist, dass ich nicht Schattenfarbe gäbe, so dass diese Lösung ist universell für alle Schriftfarben.
Ein alternativer Ansatz wäre zu fett gedruckten Text über text-shadow „emulieren“. Dies hat den Bonus (/ Malus, auf die je nach Fall) auch auf Schrift Symbole zu arbeiten.
nav li a:hover {
text-decoration: none;
text-shadow: 0 0 1px; /* "bold" */
}
Kinda Hacky, obwohl es Sie duplizieren Text speichert (was nützlich ist, wenn es viel ist, wie es in meinem Fall war).
Es ist besser zu nutzen :: vor statt a :: nach wie folgt aus:
.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>
Für weitere Informationen: https://jsfiddle.net/r25foavy/
Wenn Sie mit Javascript nicht abgeneigt sind, können Sie die richtige Breite eingestellt, sobald die Seite angezeigt wird. Hier ist, wie ich es getan hätte (mit 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' });
}
Ich kann es wirklich nicht ausstehen, wenn Ihnen jemand sagt, etwas nicht zu tun, die Art und Weise, wenn eine einfache Lösung für das Problem gibt. Ich bin über li Elemente nicht sicher, aber ich gerade das gleiche Problem behoben. Ich habe ein Menü, bestehend aus div-Tags.
Sie einfach den div-Tag festgelegt, dass "display: inline-block". Inline, so dass sie auf die nebeneinander und Block sitzen können Sie eine Breite eingestellt. Gerade die Breite breit genug eingestellt für den fett gedruckten Text zu empfangen, und der Text Mitte ausgerichtet haben.
(Hinweis: Es scheint, mein html zu werden Strippen [unten], aber jeder Menüpunkt hatte einen div-Tag um es mit der corrasponding ID gewickelt und dem Klassennamen SearchBar_Cateogory dh:. <div id="ROS_SearchSermons" class="SearchBar_Category">
HTML (Ich hatte Anker-Tags um jeden Menüpunkt eingewickelt, aber ich war nicht in der Lage sie sich als neuer Benutzer einreichen)
<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;
}
versuchen Sie dies:
.nav {
font-family: monospace;
}
Sie können versuchen, die negativen Margen zu, wenn der fett gedruckten Text breiter als die regulär. (nicht immer) So ist die Idee Klassen zu verwenden, anstatt stylen das ist. Zustand schweben
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;
}
Ich hoffe ich konnte helfen!
