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 change?
or may be somehow with jquery?
try this:
legend.green-color a:hover{
text-decoration: none;
}
Remove the text decoration for the anchor tag
<a name="Section 1" style="text-decoration : none">Section</a>
You can use CSS under legend.green-color a:hover to do it.
legend.green-color a:hover {
color:green;
text-decoration:none;
}
To keep the color and prevent an underline on the link:
legend.green-color a{
color:green;
text-decoration: none;
}
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):
def
Then add the necessary CSS as follows:
#smallLinkButton:hover,active,visited{
text-decoration: none;
}
legend.green-color{
color:green !important;
}
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"
Related
I am working on an HTML email signature, which has to be done using rudimentary HTML. I have to use very simple CSS, tables and declare inline CSS for everything. All in all it works fine, but I have an issue with links. I can stripe the link to have no underline or color:
<a style="text-decoration: none; color:inherit!important;" href="https://#">link</a>
But don't know it is possible at all to add :hover entity inline?
a: hover {text-decoration: underline;}
Any ideas are welcome!
There's no equivalent :hover in inline css.
You can give your anchor tag a class or id and change the property you need in there
<a class="anchor"> link </a>
Inside your css stylesheet
.anchor{
text-decoration: none;
}
if you don't want to use external stylesheet you can add a onmouseover attribute to the element like so
Link
The inline style have higher priority.
simply remove the text-decoration: none; from the element.
a{
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
<a style="color:inherit!important;" href="https://#">link</a>
another way is to add !important, but it's considered a bad habit:
a:hover{
text-decoration: underline !important;
}
For the Bootstrap Collapse Component, I have a question regarding the "Accordion example". I wish to remove the underline from the text "Collapsible Group Item" 1-3 when they are in use. They are by default not underlined, and then when moused over, they are underlined. This is modifiable by doing:
btn-link:{
text-decoration: none;
}
However, after clicking and moving the mouse away, the underline persists until something else is clicked. How would I remove the underline there? Check the link to see the behavior I am talking about.
just add mouse hover for btn-link
.btn-link:hover, .btn-link, .btn-link:focus{
text-decoration:none;
}
check the demo here
You need to add two things:
To remove the hover underlining add:
.btn-link:hover{
text-decoration:none;
}
And for the underlining after the click add:
.btn-link:focus{
text-decoration:none;
}
Check out this example.
You need to add two style type for this
.btn-link.focus, .btn-link:focus {
text-decoration: none; //here is if you want to remove
box-shadow: none;
}
and this
.btn-link:hover{
text-decoration:none; //here is if you want to remove
}
the issue seems like because of the pseudo class :focus you can overwrite the CSS of :focus like this.
.btn-link.focus, .btn-link:focus {
text-decoration: none;
}
I hope this solves the issue.
Simple way: just add !important
.btn-link {
text-decoration:none !important;
}
Fiddle
or you can use :focus for click and :hover for hovering,
.btn-link:focus, .btn-link:hover {
text-decoration: none;
}
The default link color is blue.
How do I remove the default link color of the html hyperlink tag <a>?
The inherit value:
a { color: inherit; }
… will cause the element to take on the colour of its parent (which is what I think you are looking for).
A live demo follows:
a {
color: inherit;
}
<p>The default color of the html element is black. The default colour of the body and of a paragraph is inherited. This
link would normally take on the default link or visited color, but has been styled to inherit the color from the paragraph.</p>
Try something like this:
a {
color: #0060B6;
text-decoration: none;
}
a:hover {
color:#00A0C6;
text-decoration:none;
cursor:pointer;
}
If text-decoration doesn't work, change it to:
text-decoration: none !important;
The !important rule overrides every other styling to the text-decoration attribute. You can read more about it here.
If you don't want to see the underline and default color which is provided by the browser, you can keep the following code in the top of your main.css file. If you need different color and decoration styling you can easily override the defaults using the below code snippet.
a, a:hover, a:focus, a:active {
text-decoration: none;
color: inherit;
}
.cancela,.cancela:link,.cancela:visited,.cancela:hover,.cancela:focus,.cancela:active{
color: inherit;
text-decoration: none;
}
I felt it necessary to post the above class definition, many of the answers on SO miss some of the states
This is also possible:
a {
all: unset;
}
unset: This keyword indicates to change all the properties applying to
the element or the element's parent to their parent value if they are
inheritable or to their initial value if not. unicode-bidi and
direction values are not affected.
Source: Mozilla description of all
Simply add this in CSS,
a {
color: inherit;
text-decoration: none;
}
that's it, done.
You have to use CSS. Here's an example of changing the default link color, when the link is just sitting there, when it's being hovered and when it's an active link.
a:link {
color: red;
}
a:hover {
color: blue;
}
a:active {
color: green;
}
<a href='http://google.com'>Google</a>
You can use System Color (18.2) values, introduced with CSS 2.0, but deprecated in CSS 3.
a:link, a:hover, a:active { color: WindowText; }
That way your anchor links will have the same color as normal document text on this system.
I had this challenge when I was working on a Rails 6 application using Bootstrap 4.
My challenge was that I didn't want this styling to override the default link styling in the application.
So I created a CSS file called custom.css or custom.scss.
And then defined a new CSS rule with the following properties:
.remove_link_colour {
a, a:hover, a:focus, a:active {
color: inherit;
text-decoration: none;
}
}
Then I called this rule wherever I needed to override the default link styling.
<div class="product-card__buttons">
<button class="btn btn-success remove_link_colour" type="button"><%= link_to 'Edit', edit_product_path(product) %></button>
<button class="btn btn-danger remove_link_colour" type="button"><%= link_to 'Destroy', product, method: :delete, data: { confirm: 'Are you sure?' } %></button>
</div>
This solves the issue of overriding the default link styling and removes the default colour, hover, focus, and active styling in the buttons only in places where I call the CSS rule.
That's all.
I hope this helps
a:link{color:inherit;}
this is the simple one line can do all stuffs for you <3
I too wanted to remove the default blue link color of a tag.
As I was using bootstrap version 5 I decided to look for the solution in bootstrap documentation.
I searched for "link color" and the result was this link: "https://getbootstrap.com/docs/5.0/helpers/colored-links/"
bootstrap version 5.0 has a class to customise the link colors which I found very helpful and also I was able to change the default blue color of my 'a' tag without any fuss.
Hope this is helpful.
Here are two methods to remove the default link color:
Method 1: Using inline CSS
Link Text
Method 2: Using a CSS stylesheet
a {
color: black;
}
<style>
a {
color: ;
}
</style>
This code changes the color from the default to what is specified in the style. Using a:hover, you can change the color of the text from the default on hover.
This will work
a:hover, a:focus, a:active {
outline: none;
}
What this does is removes the outline for all the three pseudo-classes.
I have the following HTML:
<div class="menu">
<a class="main-nav-item" href="home">home</a>
<a class="main-nav-item-current" href="business">business</a>
<a class="main-nav-item" href="about-me">about me</a>
</div>
In CSS, I want to set the a:hover for these menu items to a particular color. So I write:
.menu a:hover
{
color:#DDD;
}
But, I want to set this a:hover color only for those <a> tags with the class main-nav-item and not the main-nav-item-current, because it has a different color and shouldn't change on hover. All <a> tags within the menu div should change color on hover except the one with the current class.
How can I do it using CSS?
I tried something like
.menu a:hover .main-nav-item
{
color:#DDD;
}
thinking that only ones with main-nav-item class will change color on hover, and not the current one. But it is not working.
Try this:
.menu a.main-nav-item:hover { }
In order to understand how this works it is important to read this the way the browser does. The a defines the element, the .main-nav-item qualifies the element to only those which have that class, and finally the psuedo-class :hover is applied to the qualified expression that comes before.
Basically it boils down to this:
Apply this hover rule to all anchor elements with the class main-nav-item that are a descendant child of any element with the class menu.
Cascading is biting you. Try this:
.menu > .main-nav-item:hover
{
color:#DDD;
}
This code says to grab all the links that have a class of main-nav-item AND are children of the class menu, and apply the color #DDD when they are hovered.
Set a:hover based on class you can simply try:
a.main-nav-item:hover { }
how about
.main-nav-item:hover
this keeps the specificity low
try this
.div
{
text-decoration:none;
font-size:16;
display:block;
padding:14px;
}
.div a:hover
{
background-color:#080808;
color:white;
}
lets say we have a anchor tag used in our code and class"div" is called in the main program. the a:hover will do the thing, it will give a vampire black color to the background and white color to the text when the mouse is moved over it that's what hover means.
I found if you add a !important, it works when previously it didn't.
a.main-nav-item:link {
color: blue !important;
}
a.main-nav-item:visited {
color: red !important;
}
a.main-nav-item:hover {
color: purple !important;
}
a.main-nav-item:focus {
color: green !important;
}
a.main-nav-item:active {
color: green !important;
}
Also, I've read somewhere that the order is important. The mnemonic "LoVe HaTe" helps you remember it: link -> visited -> hover -> active
One common error is leaving a space before the class names. Even if this was the correct syntax:
.menu a:hover .main-nav-item
it never would have worked.
Therefore, you would not write
.menu a .main-nav-item:hover
it would be
.menu a.main-nav-item:hover
How to get a link not underlined in HTML?
It can be done in following ways:
1) If you want to remove underline from specific link, then use
Some text
2) To remove the underline from entire html page, Create a .css file, In that write following:
a { text-decoration: none; }
It will suppress underline from every anchor tag.
Just guessing at what your next question would be....
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
As everyone above said, but I wouldn't use inline styles.
Rather set a class for all links that you do not wish to have underlined.
Your link
CSS:
a.nolines{text-decoration:none;}
You'll probably want to do that in CSS.
a {
text-decoration: none;
}
Or, as an inline style:
link
for one link, use style="text-decoration:none"
if you want it for the whole site:
<style> a { text-decoration:none; } </style>
Using CSS. The property you need to set is text-decoration: none;