elementos em linha deslocando quando ousou em foco
https://stackoverflow.com/questions/556153
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Eu criei um menu horizontal usando um listas de HTML e CSS. Tudo funciona como deveria, exceto quando você passar o mouse sobre os links. Você vê, eu criei um estado de foco ousada para os links, e agora os links do menu mudar por causa da diferença de tamanho negrito.
I encontrar o mesmo problema como este post SitePoint . No entanto, o post não tem solução adequada. Eu procurei em todos os lugares por uma solução e não pode encontrar um. Certamente eu não posso ser o único a tentar fazer isso.
Alguém tem alguma idéia?
P.S:. Eu não sei a largura do texto em itens de menu que eu não pode apenas definir a largura dos itens 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>
Solução
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>
Verifique o exemplo de trabalho em jsFiddle .
A idéia é reservar espaço para negrito (ou quaisquer estilos estaduais :hover) de conteúdo no elemento :after pseudo e usando Tag do título como uma fonte de conteúdo.
Outras dicas
Uma solução comprometido é falso negrito com text-shadow, por exemplo:
text-shadow: 0 0 0.01px preto;
Para melhor comparabilidade Eu criei estes exemplos:
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>
Passando para text-shadow realmente baixo valor para blur-radius fará com que o efeito de desfoque não tão aparente.
Em geral, quanto mais a sua repetição text-shadow o mais ousado seu texto vai ter, mas ao mesmo tempo perdendo forma original das letras.
devo avisá-lo que a configuração da blur-radius às frações não vai tornar o mesmo em todos os navegadores! Safari, por exemplo, precisam de valores maiores para torná-la da mesma forma Chrome vai fazer.
Se você não pode definir a largura, então isso significa que a largura irá mudar à medida que o texto fica em negrito. Não há maneira de evitar isso, a não ser por compromissos tal como modificando o preenchimento / margens para cada estado.
Outra idéia é usar letter-spacing
a {
letter-spacing: 0.05px
}
a:hover, a:focus {
font-weight: bold;
letter-spacing: 0
}
Um no jQuery:
$('ul.nav li a').each(function(){
$(this).parent().width($(this).width() + 4);
});
edit: Enquanto isso pode trazer a solução, deve-se mencionar que ele não funciona em conjunto com o código no post original. "Display: inline" tem de ser substituído com flutuante parâmetros para uma largura de presa para ser eficaz e que menu horizontal para funcionar como o esperado
.Você pode usar somehting como
<ul>
<li><a href="#">Some text<span><br />Some text</span></a></li>
</ul>
e, em seguida, em sua css apenas definir o conteúdo período negrito e escondê-lo com visibility: hidden, para que ele mantém suas dimensões. Depois, você pode ajustar as margens dos seguintes elementos para torná-lo caber corretamente.
Eu não tenho certeza se essa abordagem é SEO embora amigável.
Eu só resolveu o problema com a solução de "sombra". Parece que o mais simples e eficaz.
nav.mainMenu ul li > a:hover, nav.mainMenu ul li.active > a {
text-shadow:0 0 1px white;
}
Não há necessidade de repetir a sombra três vezes (resultado foi o mesmo para mim).
CSS3 Solution - Experimental
(ousadia Falso)
O pensamento de compartilhar uma solução diferente, que ninguém sugeriu aqui. Há uma propriedade chamada text-stroke que será útil para isso.
p span:hover {
-webkit-text-stroke: 1px black;
}<p>Some stuff, <span>hover this,</span> it's cool</p>
Aqui, estou visando o texto do interior do tag span e acariciá-lo por um pixel com black que irá simular estilo bold para esse texto particular.
Note que esta propriedade não é amplamente suportado, a partir de agora (ao escrever esta resposta), apenas Chrome e Firefox parece apoiar isso. Para mais informações sobre o suporte ao navegador para text-stroke, você pode consultar a CanIUse .
Apenas para compartilhar algum material extra, você pode usar -webkit-text-stroke-width: 1px; se você não está olhando para definir um color para o seu curso.
Eu tive um problema semelhante ao seu. Eu queria que meus links para obter negrito quando você passa o mouse sobre eles, mas não só no menu, mas também no texto. Como você cen acho que seria uma tarefa real descobrir todas as diferentes larguras. A solução é bastante simples:
Criar uma caixa que contém o texto do link em negrito, mas colorido como sua formação e, mas a sua ligação real acima dela. Aqui está um exemplo de minha página:
CSS:
.hypo { font-weight: bold; color: #FFFFE0; position: static; z-index: 0; }
.hyper { position: absolute; z-index: 1; }
Claro que você precisa para substituir # FFFFE0 pela cor de fundo da página. O Z-índices parecem não ser necessário, mas eu colocá-los de qualquer maneira (como o elemento "hipo" irá ocorrer após o elemento "hiper" no código HTML). Agora, para colocar um link em sua página, incluem o seguinte:
HTML:
You can find foo <a href="http://bar.com" class="hyper">here</a><span class="hypo">here</span>
O segundo "aqui" será invisível e escondido abaixo de seu link. Como esta é uma caixa estática com seu link texto em negrito, o resto do seu texto não vai mudar por mais tempo, uma vez que já é deslocado antes de você passar o mouse sobre o link.
Hope I foi capaz de ajudar:)
.Enquanto
Gostaria de aconselhar contra fontes de comutação (°) no hover. Neste caso, é apenas os itens de menu em movimento um pouco, mas eu já vi casos em que o parágrafo completo começa reformatado porque o alargamento provoca uma quebra de linha extra. Você não quer ver isso acontecer quando a única coisa a fazer é mover o cursor; se você não fizer nada o layout da página não deve mudar.
A mudança também pode acontecer quando se alterna entre normal e itálico. Gostaria de tentar mudar as cores ou alternar sublinhado se você tiver espaço abaixo do texto. (Sublinhado deve ficar claro a partir da borda inferior)
Eu seria boo'd se eu usasse comutação fontes para minha classe Form Design: -)
(°) A fonte palavra muitas vezes é mal utilizado. "Verdana" é uma fonte , "Verdana normal" e "Verdana negrito" são diferentes Fontes do mesmo tipo.
Você pode trabalhar com a propriedade "margem":
li a {
margin: 0px 5px 0px 5px;
}
li a:hover {
margin: 0;
font-weight: bold;
}
Apenas certifique-se de que a margem esquerda e direita são grandes o suficiente para que o espaço extra pode conter o texto em negrito. Para palavras longas, você pode escolher margens diferentes. É apenas uma outra solução alternativa, mas fazendo o trabalho para mim.
Eu gosto de usar text-shadow vez. Especialmente porque você pode usar transições para animar text-shadow.
Tudo que você realmente precisa é:
a {
transition: text-shadow 1s;
}
a:hover {
text-shadow: 1px 0 black;
}
Para uma verificação de navegação completo esta jsFiddle: https://jsfiddle.net/831r3yrb/
O suporte ao navegador e mais informações sobre text-shadow: http://www.w3schools.com/cssref/css3_pr_text-shadow.asp
Esta é a solução que preferir. Ele requer um pouco de JS, mas você não precisa de sua propriedade título a ser exatamente o mesmo e seu CSS pode permanecer muito simples.
$('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>
O que sobre isso? A javascript -. Solução gratuita 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>
Não é muito elegante solução, mas "obras":
a
{
color: #fff;
}
a:hover
{
text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
}
Eu tenho combinado um monte das técnicas acima para fornecer algo que não totalmente chupar com js desligado e é ainda melhor com um pouco de jQuery. Agora que os navegadores suportam para subpixel letter-spacing está melhorando, é muito bom para usá-lo.
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>
Eu uso solução text-shadow como alguns outros mencionados aqui:
text-shadow: 0 0 0.01px;
a diferença é que eu não especificar cor da sombra, por isso esta solução é universal para todas as cores de fonte.
Uma abordagem alternativa seria a de "emular" texto em negrito via text-shadow. Este tem a vantagem (/ malus, dependendo do caso) para trabalhar também em ícones de fonte.
nav li a:hover {
text-decoration: none;
text-shadow: 0 0 1px; /* "bold" */
}
kinda hacky, embora ele evita que você duplicar texto (o que é útil se for muito, como foi no meu caso).
É melhor uso a :: antes em vez de a :: after como este:
.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>
Para mais detalhes: https://jsfiddle.net/r25foavy/
Se você não é avessos ao uso de Javascript, você pode definir a largura adequada uma vez que a página é mostrada. Aqui está como eu fiz isso (usando o protótipo):
$$('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' });
}
Eu realmente não aguento quando alguém lhe diz para não fazer algo assim quando há uma solução simples para o problema. Eu não tenho certeza sobre elementos li, mas eu só fixa o mesmo problema. Eu tenho um menu composto por tags div.
Basta definir a tag div para ser "display: inline-block". Em linha para que eles se sentar ao lado do outro e bloco para que você pode definir uma largura. Basta definir a largura grande o suficiente para acomodar para o texto em negrito e tem centro o texto alinhado.
(Nota: Parece ser que eliminasse o meu html [abaixo], mas cada item do menu tinha uma tag div em torno dele com o ID corrasponding eo nome da classe SearchBar_Cateogory ou seja:. <div id="ROS_SearchSermons" class="SearchBar_Category">
HTML (Eu tinha marcas de âncora envolvida em torno de cada item do menu, mas eu não era capaz de enviá-los como um novo usuário)
<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;
}
tente o seguinte:
.nav {
font-family: monospace;
}
Você pode tentar as margens negativas também se o texto em negrito é mais largo do que o regular. (nem sempre) Então, a ideia é classes de uso, em vez do estilo:. Estado de foco
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;
}
Espero que eu poderia ajudar!
