호버링시 굵게 표시 될 때 인라인 요소 이동

HTML 목록과 CSS를 사용하여 가로 메뉴를 만들었습니다. 링크 위로 마우스를 가져갈 때를 제외하고는 모든 것이 제대로 작동합니다. 보시다시피, 링크에 굵은 호버 상태를 만들었습니다. 이제 굵은 크기의 차이로 인해 메뉴 링크가 바뀝니다.

이 SitePoint 게시물 과 동일한 문제가 발생합니다 . 그러나 게시물에는 적절한 해결책이 없습니다. 나는 모든 곳에서 해결책을 찾았지만 찾을 수 없습니다. 분명히 나는 ​​이것을하려고하는 유일한 사람이 될 수 없습니다.

누구든지 아이디어가 있습니까?

추신 : 메뉴 항목의 텍스트 너비를 모르므로 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만이 지원합니다. 에 대한 브라우저 지원에 대한 자세한 내용은 CanIUse를text-stroke 참조하십시오 .

추가 항목을 공유 하기 위해 스트로크에 대해 -webkit-text-stroke-width: 1px;설정하지 않으려는 경우 사용할 수 있습니다 color.

당신은 같은 somehting를 사용할 수 있습니다

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

그림자를 세 번 반복 할 필요가 없습니다 (결과는 나에게 동일했습니다).

나는 너와 비슷한 문제가 있었다. 메뉴뿐만 아니라 텍스트에도 마우스를 올려 놓으면 링크가 굵게 표시되기를 원했습니다. 당신이 cen 추측으로 그것은 모든 다른 폭을 알아내는 진짜 집안일 것입니다. 해결책은 매우 간단합니다.

링크 텍스트를 굵게 표시하지만 배경과 같은 색상을 사용하지만 그 위에 실제 링크를 포함하는 상자를 만듭니다. 내 페이지의 예는 다음과 같습니다.

CSS :

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

물론 # FFFFE0을 페이지의 배경색으로 바꿔야합니다. z- 표시는 필요하지 않은 것처럼 보이지만 어쨌든 HTML 코드에서 "hyper"요소 뒤에 "hypo"요소가 발생하므로). 이제 페이지에 링크를 넣으려면 다음을 포함하십시오.

HTML :

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

두 번째 "여기"는 보이지 않으며 링크 아래에 숨겨져 있습니다. 링크 텍스트가 굵게 표시된 정적 상자이므로 링크 위로 마우스를 가져 가기 전에 텍스트가 이미 이동되어 나머지 텍스트가 더 이상 이동하지 않습니다.

내가 도울 수 있기를 바랍니다 :).

그럼 또

"여백"속성으로 작업 할 수 있습니다.

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

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

여분의 공간에 굵은 텍스트가 포함될 수 있도록 왼쪽 및 오른쪽 여백이 충분히 큰지 확인하십시오. 긴 단어의 경우 다른 여백을 선택할 수 있습니다. 그것은 또 다른 해결 방법이지만 나를 위해 일을하고 있습니다.

대신 텍스트 그림자를 사용하고 싶습니다. 특히 전환을 사용하여 텍스트 그림자에 애니메이션을 적용 할 수 있기 때문입니다.

실제로 필요한 것은 다음과 같습니다.

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

전체 탐색을 위해 다음 jsfiddle을 확인하십시오. https://jsfiddle.net/831r3yrb/

text-shadow에 대한 브라우저 지원 및 추가 정보 : 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" */
   }

킨다 해키 (Kinda hacky)는 텍스트 복제로부터 당신을 구하지 만 (내 경우와 마찬가지로 텍스트가 많이 있으면 유용합니다).

이것이 내가 선호하는 솔루션입니다. 약간의 JS가 필요하지만 title 속성이 똑같을 필요는 없으며 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>

이건 어때? 자바 스크립트-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>

다음 과 같이 대신 a :: 를 사용 하는 것이 좋습니다 .

.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을 제거하는 것처럼 보이지만 각 메뉴 항목에는 해당 ID와 클래스 이름 SearchBar_Cateogory로 감싸 진 div 태그가 있습니다. <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;
}

굵은 체 텍스트가 일반보다 넓 으면 음수 여백도 시도 할 수 있습니다. (항상 그런 것은 아님) 아이디어는 클래스를 사용하여 : 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;
}

도와 드릴 수 있기를 바랍니다!