writing somewhat of a css hack, styling for :hover {} works interestingly, but browsers treat a:hover differently for full links VS hash tags.
from http://inqdrops.com/welcom/
a, a:active, a:visited { color: #765; text-decoration: none;}
:hover { color: #ff5e99; text-decoration:overline; background: #222}
for this code, hovers on <a href='http://what.eva/'></a> and <a href='#whateva'></a> behave differently. They also differ for webkit and gecko.
Can someone explain what is happening?
--
EDITED FOR EXPLANATION ON SOLUTION
the answer by #babtek pointed me in the right direction, and the solution was to expand the css rule to :hover, :visited:hover {...}
I think a:visited ends up being more specific than :hover since it has a tagname as well... your "#" links might not get flagged as visited?
WHy don;t you change the css to
a:hover
in case someone is intersted, what i was missing was the css rules' order. plus a psuedo:psuedo rule
a, a:active, a:visited {color: #765; text-decoration: none;}
:hover, :visited:hover { color: #ff5e99; text-decoration:overline; background: #222}
thanks fo the tips
Related
I was trying styles with a:visited, a:link, etc... and I found these 2 issues with a:visited:
why is font-size of a:visited ignored and a:link used instead
why is background-color not showing depending on whether a:link has background-color property or not
Example
a:link {
/*background-color:#ff8000;*/
font-size: 28px;
}
a:visited {
font-size: 12px;
background-color: grey;
color: #10aaf0;
}
I googled a bit and read in w3schools that most of the styles are inherited from a:link for security/privacy issues, but what I don't understand is why background-color only works when I explicitly set it in a:link and then modify it in a:visited.
TL;DR:
What's the difference between explicitly set background-color for
a:link to let a:visited apply its own background-style?
Is it still sensitive to those browser history query attacks through CSS?
It seems to behave the same way in the browrsers I tried: Chrome 45 and in IE 11.
I can't speak of security issues since I haven't heard of such thing associated with anchor tags. But a:link selector in most of the cases acts like a since it's applied to anchor tags with href attribute. And a:visited only applies to links which user has visited before. Other than that you should be aware of the order of declaring your styles.
For example take a look at this: http://codepen.io/anon/pen/ojzwgY
It works as expected in Firefox, Safari and Chrome
Below code attempts to prevent a href from changing color. I have added !important as attempt to achieve this :
NG
a:link, :visited, :active, :active { color: navy; !important}
a:hover, :focus { color: #FF6800;}
http://jsfiddle.net/Ht6Ym/3264/
But when hover over element its color changes, have I incorrectly used?
add !important before semicolon:
color: navy !important;
Your selectors are a little off, this worked for me. Also fix the syntax of important.
a:link, a:visited, a:active, a:active { color: navy!important; }
a:hover, a:focus { color: #FF6800;}
http://jsfiddle.net/oadg1vgc/1/
you don't actually need the !important declaration, as this is very much seen as hackish and you should look to be more specific instead. For example, the below doesn't use the important declaration, and yet doesn't cause an issue:
a,
a:hover {
color: black
}
link 1
<br/>
link 2
<br/>
link 3
<br/>
link 4
<br/>
As a reference, though, the !important tag should be placed before the semicolon ; in your declarations.
a:link,
:visited,
:active,
:active {
color: navy !important;
}
a:hover,
:focus {
color: #FF6800;
}
NG
However, I can only stress how much this should be avoided, as it can cause issues further down the line in terms of specificity.
You have used wrong syntax, Fix the syntax
a:link, :visited, :active, :active { color: navy !important;}
I've styled links using CSS like the example below.
This is working as expected in Chrome however with IE8 I'm having this problem:
When you first visit the page all links do not have underline as expected.
If I hover on them they get underlined as expected.
If then visit the link the underline disappears as expected however if I again hover on them I don't get the underline anymore.
Any ideas...?
Thanks
a:link {color:#0064cc;font-family:Arial;font-size:13px;text-decoration:none !important;}
a:active {color:#0064cc;font-family:Arial;font-size:13px;text-decoration:none !important;}
a:hover {color:#0064cc;font-family:Arial;font-size:13px;text-decoration:underline !important;}
a:visited {color:#0064cc;font-family:Arial;font-size:13px;text-decoration:none !important;}
Your problem comes from the fact that your links aren't styled in LVHA order. You should style them with :link first, then :visited, then :hover, then :active for consistent cross-browser results.
Additionally, any style applied to :link doesn't need to be reapplied to :visited, :hover, or :active unless you want to override it with a different value. For example, when you declare text-decoration:none for :link, you don't need to put that in any other definitions except for :hover, where you want to override it to none. Since all of the styles except for :hover are the same, you can kind of bypass the LVHA order here:
a:link, a:visited, a:active {
color: #0064cc;
font-family: Arial;
font-size: 13px;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
Hope this helps!
Edit
Although your issue isn't related to your use of !important, it is generally a good idea to avoid using it. It leads to some pretty non-semantic CSS. It's better to have a comprehensive understanding of the order in which CSS selectors are applied (it's not as simple as you might think!). Check out the MDN's documentation for more info.
Try to list the different selectors in the correct order.
a:hover MUST come after a:link and a:visited
a:active MUST come after a:hover
Also, you should not use !important. This can cause you problems later.
Src: http://www.w3schools.com/css/css_link.asp
Just have a read about CSS selectors specificity, and reorder your styles rules:
http://www.w3.org/TR/css3-selectors/#specificity
And try to avoid !important like the Devil avoids the Cross.
I have an image that is a link. When I click on it it sends me somewhere and then if I click back to return on that page that image has a 1px dotted blue border around itself. Furthermore, if I click on it and hold that border becomes red. This is really bad looking and I cannot find a way to delete that border.
I've tried with
a:visited {text-decoration: none}
a:active {text-decoration: none}
and with:
a:visited img{text-decoration: none}
a:active img{text-decoration: none}
with no effect.
By the way, this border does not appear in chrome.
Here is my css code regarded to that image:
#back_to_photos{
float:right;
position: relative;
margin-top:-238px;
margin-right: 40px;
}
a:visited {text-decoration: none}
a:active {text-decoration: none}
Thank you!
Maybe is something wrong with the order of your rules (don't know these are the only styles mentioned in your example). What you could try is to 'force it' by using !important:
a {text-decoration: none !important;}
Hopes it helps.
the solution for your problem is this:
a:link, a:link:hover { text-decoration: none }
hope it helps.
more info on: squarefree.com/styles
This post describes how to do so. Namely, putting outline: 0; in your a:visited CSS should do the trick.
text-decoration only deals with things like underlines and strikethroughs. The problem you're encountering is with outline that is put around clicked/focused links to tell the user that's what they're hovering over.
Do note that if you remove the outline it won't be apparent where the user is if they're navigating your page with the keyboard.
You want to use outline: none.
Be careful though, hiding the outline can lead to usability issues, especially with those users who navigate with the keyboard.
Here's a screenshot of the problem:
Notice that we're on the stalk page. The CSS I wrote is supposed to change the color of the active page. Here is the CSS:
#nav {
border-top:10px solid #A7C1D1;
height:45px;
padding-left:100px;
padding-top:20px;
margin-left:0;
color:#000;
}
#nav a {
color:#000;
text-decoration:none;
}
#nav a:visited {
color:#000;
}
#nav a:hover {
color:#93AFBF;
}
#nav .active {
color:#93AFBF;
}
Before, I had the CSS for #nav .active to create a border around the active page. This worked and I could see the border around the word "stalk" when I was on the /stalk page. But this time around, I decided to just change the color of the word. This is where I ran into the issue.
Here is the HTML rendered for the page:
<div id="nav">
home · stalk · link3 · link4
</div>
If I take away the CSS for #nav a:visited then the CSS for #nav .active works, but now the visited links are blue when I want them to stay black.
Use
#nav a.active {
color:#93AFBF;
}
The #nav a:visited has higher specificity w3 specs than #nav .active and thus gets applied.
Try
#nav a.active
{
color: #93afbf
}
That should do it.
try:
#nav a:link {color: #000;}
#nav a:visited {color: #000;}
#nav a:hover {color: #93afbf;}
#nav a:active {color: #93afbf;}
You are confusing the active pseudo class
Site Point Refrence
This pseudo-class matches any element that’s in the process of being activated. It would apply, for instance, for the duration of a mouse-click on a link, from the point at which the mouse button’s pressed down until the point at which it’s released again. The pseudo-class does not signify a link to the active, or current, page—that’s a common misconception among CSS beginners.
Similar Problem
Border property is not inherited while color property it is. So you inherit the color property for your link from the #nav, while the border property was the one declared in the "active" class rules. You should declare the color property for the link with the "active" class as suggested by Gaby
Tonight I found an unusual one. (A link color that I couldn't change.) I went into the inspector and first found the text-decoration-color property set. But no, that would be too easy. I scroll down to color and find this :not selector, which a theme author created. In my specific case, the solution was to duplicate (overwrite) this weird selector with the color I wanted:
#the-post .entry-content a:not(.shortc-button) {
color: white !important;
}
My suggestion is to go into your inspector (F12) and find the "Computed" tab and look where the colors are coming from. Usually it's straightforward where the color is coming from, and the inspector will even tell you which file and which line number set the color. Then the decision is, do you have access/permission to that file? Or maybe you have access, but do you necessarily want access to that file?
If you want to avoid changing the source of the color, for whatever reason, you can just re-declare the color again further down the page, like in your footer, or immediately after the theme is loaded, whatever the case may be. Of course given the option, it's usually preferable to find the root of the problem and then you end up using less CSS code which loads faster and is easier to maintain.