How to remove underline from a name on hover
HtmlCssHtml Problem Overview
I have such html:
<legend class="green-color"><a name="section1">Section</a></legend>
legend.green-color{
color:green;
}
In my case Section
looking green, but when i put mouse pointer on it it became looking like an a href, but i want it stay just the same without underline and changing color.
Is it possible to achieve without changing css or with minimum css cahnge?
or may be somehow with jquery?
Html Solutions
Solution 1 - Html
try this:
legend.green-color a:hover{
text-decoration: none;
}
Solution 2 - Html
Remove the text decoration for the anchor tag
<a name="Section 1" style="text-decoration : none">Section</a>
Solution 3 - Html
You can use CSS under legend.green-color a:hover
to do it.
legend.green-color a:hover {
color:green;
text-decoration:none;
}
Solution 4 - Html
To keep the color and prevent an underline on the link:
legend.green-color a{
color:green;
text-decoration: none;
}
Solution 5 - Html
You can assign an id to the specific link and add CSS. See the steps below:
1.Add an id of your choice (must be a unique name; can only start with text, not a number):
<a href="/abc/xyz" id="smallLinkButton">def</a>
2. Then add the necessary CSS as follows:
#smallLinkButton:hover,active,visited{
text-decoration: none;
}
Solution 6 - Html
legend.green-color{
color:green !important;
}
Solution 7 - Html
In react
you need to do this
<Link to="/" style={{ textDecoration: 'none' }}>
....
</Link>
or if you are using bootstrap
in react
then use this class
className="text-decoration-none"