CODEWITHSUNDEEP
htmlcsshover
Santron Manibharathi
Santron Manibharathi

Reputation: 642

CSS overwrite existing style for an element

I am having a webpage with css style for an <A> tag. The style is also written for A:Hover for that tag. But i want to remove it for a particular tag alone. Can I set a property in CSS to have no change in value.

Lets us hope like this

A:hover {
font-family:no-change;
}

Or is there any particular way to avoid using the A:tag for that particular tag alone?

Upvotes: 1

Views: 5039

Answers (5)

Eduardo Ponce de Leon
Eduardo Ponce de Leon

Reputation: 9706

give a class to your anchor, else this will affect all anchors:

HTML:

<a href="#" class="link_class">the link</a>
<a href="#" >other link</a>
<a href="#" >other link</a>
<a href="#" >other link</a>

CSS:

.link_class:hover{
 font-family: 'default_font_family' !important;
}

if you wish to apply to all anchors then:

CSS (do not use caps):

a:hover{
 font-family: 'default_font_family' !important;
}

Upvotes: 0

grandivory
grandivory

Reputation: 639

I'm generally not a fan of using !important where it doesn't need to be used.

In this case, you can use your general style for <a> tags

a:hover {
  font-family: 'Some weird font';
}

Then set a class or id or somesuch on the tag you want to behave differently, and use inherit to prevent the font from changing

a.special:hover {
  font-family: inherit;
}

This is the default value for the font-family property, and basically says "treat this element as if it didn't have its own style - just grab it from the parent like normal"

Upvotes: 5

mshsayem
mshsayem

Reputation: 18028

Mention the font-name for that particular a and append !important to it. Like: 

font-family:Arial !important;

Alternatively, create a class (say .special) with hover style and use that to the particular a:

.special:hover
{
    font-family:Arial;
}

I like the solution of PSL though.

Upvotes: 0

BrunoLM
BrunoLM

Reputation: 100381

You can set style attribute and set the value of the font-family to override what the css says.

<a style="font-family: arial"></a>

Example on jsFiddle using colors

Upvotes: 0

PSL
PSL

Reputation: 123739

If your "particular" anchor tag has a class or id you could use :not pseudo class

a:not(.exemptedSelector):hover {  
 /*Your style goes here*/
}

Demo

Documentation

Support

Or just provide a hover style for your "particular" anchor tag to override the style provided using A tag.

.exemptedSelector:hover
{
/*Your style goes here*/
}

Upvotes: 3

Related Questions