วิธีลบขีดเส้นใต้จากชื่อที่วางเมาส์เหนือ

ฉันมี html ดังกล่าว:

<legend class="green-color"><a name="section1">Section</a></legend>

legend.green-color{
    color:green;
}

ในกรณีของฉันSectionมองเป็นสีเขียว แต่เมื่อฉันวางตัวชี้เมาส์มันกลายเป็นเหมือน href แต่ฉันต้องการให้มันคงอยู่เหมือนเดิมโดยไม่ขีดเส้นใต้และเปลี่ยนสี

เป็นไปได้หรือไม่ที่จะบรรลุโดยไม่ต้องเปลี่ยน css หรือด้วย css cahnge ขั้นต่ำ?

หรืออาจจะเป็นด้วย jquery?

ลองสิ่งนี้:

legend.green-color a:hover{
    text-decoration: none;
}

ลบการตกแต่งข้อความสำหรับแท็กจุดยึด

<a name="Section 1" style="text-decoration : none">Section</a>

คุณสามารถใช้ CSS ภายใต้legend.green-color a:hoverเพื่อทำได้

legend.green-color a:hover {
    color:green;
    text-decoration:none;
}

หากต้องการรักษาสีและป้องกันไม่ให้มีการขีดเส้นใต้บนลิงก์:

legend.green-color a{
    color:green;
    text-decoration: none;
}

คุณสามารถกำหนด id ให้กับลิงก์เฉพาะและเพิ่ม CSS ดูขั้นตอนด้านล่าง:

1. เพิ่ม ID ที่คุณเลือก (ต้องเป็นชื่อที่ไม่ซ้ำกันสามารถขึ้นต้นด้วยข้อความเท่านั้นไม่ใช่ตัวเลข):

<a href="/abc/xyz" id="smallLinkButton">def</a>

2. จากนั้นเพิ่ม CSS ที่จำเป็นดังต่อไปนี้:

   #smallLinkButton:hover,active,visited{
   
         text-decoration: none;
         }