องค์ประกอบแบบอินไลน์ขยับตัวเมื่อทำตัวหนาในการโฮเวอร์

ฉันสร้างเมนูแนวนอนโดยใช้รายการ HTML และ CSS ทุกอย่างทำงานได้ตามปกติยกเว้นเมื่อคุณวางเมาส์เหนือลิงก์ คุณเห็นไหมว่าฉันได้สร้างสถานะโฮเวอร์ตัวหนาสำหรับลิงก์และตอนนี้ลิงก์เมนูเปลี่ยนเนื่องจากขนาดตัวหนาแตกต่างกัน

ฉันพบปัญหาเดียวกันกับโพสต์ SitePointนี้ อย่างไรก็ตามโพสต์ไม่มีทางออกที่เหมาะสม ฉันค้นหาวิธีแก้ปัญหาทุกที่และหาไม่พบ แน่นอนฉันไม่สามารถเป็นคนเดียวที่พยายามทำสิ่งนี้

ไม่มีใครมีความคิดใด ๆ

PS: ฉันไม่รู้ความกว้างของข้อความในรายการเมนูดังนั้นฉันไม่สามารถกำหนดความกว้างของรายการ 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องค์ประกอบปลอมและใช้แท็กชื่อเป็นแหล่งเนื้อหา

ทางออกที่ถูกต้องคือการปลอมตัวหนาด้วย text-shadow เช่น:

ข้อความเงา: 0 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 เท่านั้นที่รองรับ สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการสนับสนุนเบราว์เซอร์text-strokeที่คุณสามารถดูCanIUse

เพียงเพื่อแบ่งปันสิ่งพิเศษคุณสามารถใช้-webkit-text-stroke-width: 1px;หากคุณไม่ต้องการตั้งค่าสcolorโตรกคุณ

คุณสามารถใช้สิ่งที่ชอบ

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

ไม่จำเป็นต้องทำซ้ำเงาสามครั้ง (ผลเหมือนกันสำหรับฉัน)

ฉันมีปัญหาคล้ายกับของคุณ ฉันต้องการให้ลิงก์ของฉันกล้าหาญเมื่อคุณวางเมาส์เหนือพวกเขา แต่ไม่เพียง แต่ในเมนู แต่รวมถึงในข้อความด้วย ในขณะที่คุณเดาว่ามันคงเป็นงานที่น่าเบื่อจริงที่จะพิจารณาความกว้างที่แตกต่างกันทั้งหมด การแก้ปัญหาค่อนข้างง่าย:

สร้างกล่องที่มีข้อความลิงค์เป็นตัวหนา แต่มีสีเหมือนพื้นหลังของคุณและเป็นลิงค์จริงของคุณด้านบน นี่คือตัวอย่างจากหน้าของฉัน:

CSS:

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

แน่นอนคุณต้องแทนที่ # FFFFE0 ด้วยสีพื้นหลังของหน้าเว็บของคุณ ดูเหมือนว่าดัชนี z ไม่จำเป็น แต่ฉันใส่ไว้ในนั้น (เนื่องจากองค์ประกอบ "hypo" จะเกิดขึ้นหลังจากองค์ประกอบ "ไฮเปอร์" ใน HTML-Code) ตอนนี้หากต้องการใส่ลิงค์ในหน้าของคุณรวมถึงต่อไปนี้:

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

ตรวจสอบให้แน่ใจว่าระยะขอบซ้ายและขวาใหญ่พอเพื่อให้พื้นที่พิเศษสามารถมีข้อความตัวหนาได้ สำหรับคำยาวคุณอาจเลือกระยะขอบที่แตกต่างกัน มันเป็นเพียงวิธีการแก้ปัญหาอื่น แต่ทำงานให้ฉัน

ฉันชอบใช้ text-shadow แทน โดยเฉพาะอย่างยิ่งเนื่องจากคุณสามารถใช้ช่วงการเปลี่ยนภาพเป็นข้อความเงาได้

สิ่งที่คุณต้องการจริงๆคือ:

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

ฉันจะให้คำแนะนำกับการเปลี่ยนแบบอักษร (°) เมื่อเลื่อน ในกรณีนี้เป็นเพียงรายการเมนูที่เคลื่อนไหวเล็กน้อย แต่ฉันเคยเห็นกรณีที่ย่อหน้าที่สมบูรณ์ได้รับการฟอร์แมตใหม่เนื่องจากการขยับขยายทำให้เกิดการตัดคำเพิ่มเติม คุณไม่ต้องการเห็นสิ่งนี้เกิดขึ้นเมื่อสิ่งเดียวที่คุณทำคือเลื่อนเคอร์เซอร์ ถ้าคุณไม่ทำอะไรเค้าโครงหน้าไม่ควรเปลี่ยนแปลง

กะสามารถเกิดขึ้นได้เมื่อสลับระหว่างปกติและตัวเอียง ฉันจะลองเปลี่ยนสีหรือสลับขีดเส้นใต้ถ้าคุณมีห้องด้านล่างข้อความ (การขีดเส้นใต้ควรชัดเจนจากขอบด้านล่าง)

ฉันจะโห่ถ้าฉันใช้การเปลี่ยนแบบอักษรสำหรับคลาสการออกแบบฟอร์มของฉัน :-)

(°) ตัวอักษรของคำถูกนำไปใช้ในทางที่ผิดบ่อยครั้ง "Verdana" เป็นแบบอักษร "Verdana ปกติ" และ "Verdana bold" เป็นแบบอักษรที่แตกต่างกันของแบบอักษรเดียวกัน

ฉันใช้โซลูชันข้อความเงาตามที่คนอื่นพูดถึงที่นี่:

text-shadow: 0 0 0.01px;

ความแตกต่างคือฉันไม่ได้ระบุสีเงาดังนั้นวิธีนี้เป็นสากลสำหรับทุกสีตัวอักษร

วิธีการทางเลือกคือการ "เลียนแบบ" ตัวหนาผ่าน text-shadow นี่คือโบนัส (/ malus ขึ้นอยู่กับกรณีของคุณ) เพื่อทำงานบนไอคอนตัวอักษร

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

ค่อนข้างแฮ็กแม้ว่ามันจะช่วยให้คุณประหยัดจากการทำซ้ำข้อความ (ซึ่งมีประโยชน์ถ้ามันมีจำนวนมากอย่างที่มันเป็นในกรณีของฉัน)

นี่คือทางออกที่ฉันต้องการ มันต้องการบิตของ JS แต่คุณไม่ต้องการให้คุณสมบัติหัวเรื่องของคุณเหมือนกันและ 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>

แล้วเรื่องนี้ล่ะ A javascript - 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 :: ก่อนแทน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 คุณสามารถตั้งค่าความกว้างที่เหมาะสมได้เมื่อมีการแสดงหน้าเว็บ นี่คือวิธีที่ฉันทำ (ใช้ 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' });
}

ฉันไม่สามารถทนได้เมื่อมีคนบอกคุณว่าอย่าทำอะไรแบบนั้นเมื่อมีวิธีแก้ไขปัญหาที่ง่าย ฉันไม่แน่ใจเกี่ยวกับองค์ประกอบของ li แต่ฉันเพิ่งแก้ไขปัญหาเดียวกัน ฉันมีเมนูที่ประกอบด้วยแท็ก div

เพียงตั้งค่าแท็ก div ให้เป็น "display: inline-block" อินไลน์เพื่อให้พวกเขานั่งถัดจากกันและบล็อกเพื่อให้คุณสามารถตั้งค่าความกว้าง เพียงตั้งค่าความกว้างกว้างพอที่จะรองรับข้อความที่เป็นตัวหนาและจัดแนวศูนย์ข้อความ

(หมายเหตุ: ดูเหมือนจะเป็นการแยก html ของฉันออกมาด้านล่าง แต่รายการเมนูแต่ละรายการมีแท็ก div ล้อมรอบด้วย ID ที่มีการเชื่อมต่อกันและชื่อคลาส SearchBar_Cateogory เช่น: <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;
}

คุณสามารถลองใช้ระยะขอบติดลบได้เช่นกันหากข้อความตัวหนากว้างกว่าปกติ (ไม่เสมอไป) ดังนั้นแนวคิดคือการใช้คลาสแทนเพื่อจัดสไตล์: สถานะโฮเวอร์

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

ฉันหวังว่าฉันจะช่วยได้!