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;
}
Related
I want to create a hyperlink that doesn't change the text when I hover over it.
I've created a special style for that type of link as follows:
a.blank:hover{
text-decoration:none;}
and the link itself:
<a class="blank" id="asdf">asdf</a>
I also have a general hyperlink style:
a:hover, a:active {
text-decoration: none;
color: #321dd3; }
I know I could get around it by defining the text colour as being the same, but is there an umbrella method to force the hyperlink not to change anything?
There are libraries such as reset.css (And more like it) that will remove these styles, but that may affect other parts of your page. It's best to use
a:hover, a:active {
text-decoration: none;
color: inherit;
}
You will also need to add a{text-decoration: none;} and define the color property (That's what's inherited) for its parent element.
Fiddle: http://jsfiddle.net/VhCf8/
I have a style sheet that provides special styling for all <A> elements:
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
However, I don't want to apply this styling to <A> elements that serve as page anchors (e.g. elements with a name attribute.) So, I create another class to override the general rule for <A> elements:
.anchor-text {
}
.anchor-text a:hover {
text-decoration: none;
}
I then apply it like this:
<a href = "">
A Hyperlink (this should underline on hover)
</a>
<a class='anchor-text' name='foo'>
Anchor text (this should NOT underline on hover)
</a>
However, using both Chrome and Firefox, BOTH the link text and the anchor text show an underline when I hover over them. So, why is the anchor-text style class not overriding the general rule for <A> tags?
!important isn't the problem. It's because your selector was .anchor-text a:hover instead of .anchor-text:hover
Here's a JSFiddle
CSS
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a.anchor-text {
}
a.anchor-text:hover {
text-decoration: none;
}
HTML
<a href = "">
A Hyperlink (this should underline on hover)
</a>
<a class="anchor-text" name="foo" href="">
Anchor text (this should NOT underline on hover)
</a>
If you want it to work without a need to use a class, you can use:
a[name]:not([name='']) {
text-decoration: none !important;
}
Fiddle: http://jsfiddle.net/Et389/
fiddle
a.anchor-text:hover {
text-decoration: none;
}
I have a website with a contacts page.
on this page I have my email address which is linked in a mailto anchor. The email displays in the usual unvisited blue with an underline.
trying to remove this is where the problem starts
My code for this link is:
<li>
<div class="icon email">Email:</div>
<div class="email_info" style="text-decoration:none">kevin#kh.co.uk</div>
</li>
I have tried adding text-decoration:none to the ul and li in my CSS code but none of them seem to work. Where am I going wrong?
Apply text-decoration: none; to the a element not the container div.
Inline styles (defining CSS via the style attribute on individual elements) is also generally bad practice - you should put it in an external stylesheet, or at least in your head like so:
<style>
.email_info a {
text-decoration: none;
}
</style>
You can try following...
ul li a {
text-decoration: none;
}
Add the following CSS
.email_info a {
text-decoration: none;
}
Try:
ul li a {
text-decoration: none;
}
if that doesn't work:
Link
and just put it in the link itself
HTML
<a class="topofpage" href="#top">TOP OF PAGE</a>
CSS
.topofpage{
color: #C00;
text-decoration: none;
}
.topofpage a:hover{
color: #FCO;
text-decoration: none;
}
On mouse over color is not changed to #FCO
Remove the anchor element in your CSS on hover event.
.topofpage:hover{
color: #FC0;
text-decoration: none;
}
Your CSS targets a link that is inside an element with the class topofpage. Put the selectors together to target a link that has the class:
a.topofpage:hover {
color: #FC0;
text-decoration: none;
}
Also, as Pavlo spotted, you are using #FCO instead of #FC0 for the color.
Your problem is simply a confusion between zeros and the letter 'O'.
Your colour is specified as #FCO. It should be #FC0.
The letter 'O' is not a valid digit in CSS colours. This is why your style does not work. It has nothing to do with it being hovered or not; it's a simple typo.
Hope that solves it for you. :-)
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;