Các phần tử nội tuyến thay đổi khi được in đậm khi di chuột

Tôi đã tạo một menu ngang bằng cách sử dụng danh sách HTML và CSS. Mọi thứ hoạt động như bình thường trừ khi bạn di chuột qua các liên kết. Bạn thấy đấy, tôi đã tạo một trạng thái di chuột đậm cho các liên kết và bây giờ trình đơn liên kết thay đổi vì sự khác biệt kích thước đậm.

Tôi gặp vấn đề tương tự như bài viết trên trang web này . Tuy nhiên, bài viết không có giải pháp thích hợp. Tôi đã tìm kiếm mọi nơi để tìm giải pháp và không thể tìm thấy giải pháp. Chắc chắn tôi không thể là người duy nhất cố gắng làm điều này.

Có ai có ý tưởng nào?

PS: Tôi không biết chiều rộng của văn bản trong các mục menu vì vậy tôi không thể chỉ đặt chiều rộng của các mục 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>

Kiểm tra ví dụ làm việc trên JSfiddle . Ý tưởng là để dành không gian cho :hovernội dung được in đậm (hoặc bất kỳ kiểu trạng thái nào ) trong :beforephần tử giả và sử dụng thẻ tiêu đề làm nguồn cho nội dung.

Một giải pháp bị xâm phạm là giả mạo đậm bằng bóng văn bản, ví dụ:

bóng văn bản: 0 0 0,01px màu đen;

Để so sánh tốt hơn tôi đã tạo ra các ví dụ sau:

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>

Chuyển đến text-shadowgiá trị thực sự thấp blur-radiussẽ làm cho hiệu ứng làm mờ không quá rõ ràng.

Nói chung, càng lặp lại text-shadow, văn bản của bạn sẽ càng táo bạo hơn nhưng đồng thời mất hình dạng ban đầu của các chữ cái.

Tôi nên cảnh báo bạn rằng việc đặt blur-radiusphân số sẽ không hiển thị giống nhau trong tất cả các trình duyệt! Ví dụ, Safari cần các giá trị lớn hơn để hiển thị nó giống như cách Chrome sẽ làm.

Nếu bạn không thể đặt chiều rộng, điều đó có nghĩa là chiều rộng sẽ thay đổi khi văn bản được in đậm. Không có cách nào để tránh điều này, ngoại trừ bằng các thỏa hiệp như sửa đổi phần đệm / lề cho mỗi trạng thái.

Một ý tưởng khác đang sử dụng 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>

Một dòng trong jquery:

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

chỉnh sửa: Mặc dù điều này có thể mang lại giải pháp, người ta nên đề cập rằng nó không hoạt động cùng với mã trong bài viết gốc. "display: inline" phải được thay thế bằng các tham số nổi để cài đặt chiều rộng có hiệu quả và menu ngang đó hoạt động như dự định.

Giải pháp CSS3 - Thử nghiệm

Suy nghĩ để chia sẻ một giải pháp khác nhau mà không ai đề nghị ở đây. Có một tài sản được gọi là text-strokesẽ có ích cho việc này.

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

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

Ở đây, tôi đang nhắm mục tiêu văn bản bên trong spanthẻ và chúng tôi vuốt nó bằng một pixel blacksẽ mô phỏng boldkiểu cho văn bản cụ thể đó.

Lưu ý rằng thuộc tính này không được hỗ trợ rộng rãi, kể từ bây giờ (trong khi viết câu trả lời này), chỉ Chrome và Firefox dường như hỗ trợ điều này. Để biết thêm thông tin về hỗ trợ trình duyệt text-stroke, bạn có thể tham khảo CanIUse .

Chỉ để chia sẻ một số nội dung bổ sung, bạn có thể sử dụng -webkit-text-stroke-width: 1px;nếu bạn không muốn thiết lập một cú đánh colorcho mình.

Bạn có thể sử dụng một số như

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

và sau đó trong css của bạn chỉ cần đặt nội dung span in đậm và ẩn nó với khả năng hiển thị: ẩn, để nó giữ kích thước của nó. Sau đó, bạn có thể điều chỉnh lề của các yếu tố sau để làm cho nó phù hợp.

Tôi không chắc chắn nếu cách tiếp cận này là thân thiện với SEO mặc dù.

Tôi chỉ giải quyết vấn đề với giải pháp "bóng tối". Có vẻ như đơn giản và hiệu quả nhất.

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

Không cần lặp lại bóng ba lần (kết quả là giống tôi).

Tôi đã có một vấn đề tương tự như của bạn. Tôi muốn các liên kết của tôi được in đậm khi bạn di chuột qua chúng nhưng không chỉ trong menu mà còn trong văn bản. Như bạn đoán, đây sẽ là một việc vặt thực sự tìm ra tất cả các chiều rộng khác nhau. Giải pháp khá đơn giản:

Tạo một hộp chứa văn bản liên kết in đậm nhưng được tô màu như nền của bạn và liên kết thực của bạn ở trên nó. Đây là một ví dụ từ trang của tôi:

CSS:

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

Tất nhiên bạn cần thay thế # FFFFE0 bằng màu nền của trang. Các chỉ số z dường như không cần thiết nhưng dù sao tôi cũng đặt chúng (vì phần tử "hypo" sẽ xuất hiện sau phần tử "hyper" trong Mã HTML). Bây giờ, để đặt một liên kết trên trang của bạn, bao gồm những điều sau đây:

HTML:

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

"Ở đây" thứ hai sẽ vô hình và ẩn bên dưới liên kết của bạn. Vì đây là hộp tĩnh có in đậm văn bản liên kết của bạn, phần còn lại của văn bản sẽ không dịch chuyển nữa vì nó đã được dịch chuyển trước khi bạn di chuột qua liên kết.

Hy vọng tôi đã có thể giúp đỡ :).

Lâu quá

Bạn có thể làm việc với thuộc tính "lề":

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

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

Chỉ cần đảm bảo rằng lề trái và phải đủ lớn để không gian thừa có thể chứa văn bản in đậm. Đối với các từ dài, bạn có thể chọn các lề khác nhau. Nó chỉ là một cách giải quyết khác nhưng làm công việc cho tôi.

Tôi thích sử dụng bóng văn bản thay thế. Đặc biệt bởi vì bạn có thể sử dụng các hiệu ứng chuyển tiếp để tạo bóng cho văn bản.

Tất cả những gì bạn thực sự cần là:

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

Để có điều hướng hoàn chỉnh, hãy xem jsfiddle này: https://jsfiddle.net/831r3yrb/

Hỗ trợ trình duyệt và biết thêm thông tin về bóng văn bản: http://www.w3schools.com/cssref/css3_prigin-shadow.asp

Tôi sẽ tư vấn chống chuyển đổi phông chữ (°) khi di chuột. Trong trường hợp này, đó chỉ là các mục menu di chuyển một chút, nhưng tôi đã thấy các trường hợp đoạn hoàn chỉnh được định dạng lại vì việc mở rộng gây ra một gói từ thêm. Bạn không muốn thấy điều này xảy ra khi điều duy nhất bạn làm là di chuyển con trỏ; nếu bạn không làm gì thì bố cục trang sẽ không thay đổi.

Sự thay đổi cũng có thể xảy ra khi chuyển đổi giữa bình thường và in nghiêng. Tôi sẽ thử thay đổi màu sắc, hoặc chuyển đổi gạch chân nếu bạn có chỗ bên dưới văn bản. (gạch chân nên giữ rõ ràng từ biên giới dưới cùng)

Tôi sẽ bị la ó nếu tôi sử dụng chuyển đổi phông chữ cho lớp Thiết kế biểu mẫu của mình :-)

(°) Phông chữ thường bị sử dụng sai. "Verdana" là một kiểu chữ , "Verdana bình thường" và "Verdana bold" là các phông chữ khác nhau của cùng một kiểu chữ.

Tôi sử dụng giải pháp bóng văn bản như một số người khác được đề cập ở đây:

text-shadow: 0 0 0.01px;

sự khác biệt là tôi không chỉ định màu bóng, vì vậy giải pháp này là phổ biến cho tất cả các màu phông chữ.

Một cách tiếp cận khác là "mô phỏng" văn bản in đậm qua bóng văn bản. Điều này có phần thưởng (/ malus, tùy theo trường hợp của bạn) để hoạt động trên các biểu tượng phông chữ.

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

Kinda hacky, mặc dù nó giúp bạn tránh khỏi việc sao chép văn bản (rất hữu ích nếu nó rất nhiều, như trong trường hợp của tôi).

Đây là giải pháp tôi thích. Nó đòi hỏi một chút về JS nhưng bạn không cần thuộc tính tiêu đề của mình giống hệt nhau và CSS của bạn có thể vẫn rất đơn giản.

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

Cái này thì sao? Một giải pháp javascript - CSS3 miễn phí.

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>

Không phải là giải pháp rất thanh lịch, nhưng "công trình":

a
{
    color: #fff;
}

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

Tôi đã kết hợp một loạt các kỹ thuật ở trên để cung cấp thứ gì đó không hoàn toàn hút với js bị tắt và thậm chí còn tốt hơn với một chút jQuery. Bây giờ các trình duyệt hỗ trợ cho khoảng cách chữ subpixel đang được cải thiện, thật tuyệt khi sử dụng nó.

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>

Tốt hơn là sử dụng a :: trước thay vì :: sau như thế này:

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

Để biết thêm chi tiết: https://jsfiddle.net/r25fo lượn /

Tôi đã sửa menu khi di chuột đậm thành công. Nó hỗ trợ responsive, đây là mã của tôi:

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

Nếu bạn không phản đối việc sử dụng Javascript, bạn có thể đặt độ rộng phù hợp sau khi trang được hiển thị. Đây là cách tôi đã làm (sử dụng 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' });
}

Tôi thực sự không thể chịu đựng được khi ai đó bảo bạn đừng làm điều đó theo cách đó khi có một giải pháp đơn giản cho vấn đề. Tôi không chắc chắn về các yếu tố li, nhưng tôi chỉ khắc phục vấn đề tương tự. Tôi có một menu bao gồm các thẻ div.

Chỉ cần đặt thẻ div là "display: inline-block". Nội tuyến để chúng ngồi cạnh nhau và chặn để bạn có thể đặt chiều rộng. Chỉ cần đặt chiều rộng đủ rộng để chứa văn bản in đậm và căn giữa văn bản được căn chỉnh.

. <div id="ROS_SearchSermons" class="SearchBar_Category">

HTML (Tôi có các thẻ neo bao quanh từng mục menu, nhưng tôi không thể gửi chúng dưới dạng người dùng mới)

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

thử cái này:

.nav {
  font-family: monospace;
}

Bạn cũng có thể thử các lề âm nếu văn bản in đậm rộng hơn thông thường. (không phải luôn luôn) Vì vậy, ý tưởng là sử dụng các lớp thay vì định kiểu: trạng thái di chuột.

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

Tôi hy vọng tôi có thể giúp!