I recently encountered an 'Issue' in the Edge Browser using the following code leading to a weird hover transitioning behavior on links.
Take a look yourself:
JSFiddle
The App I'm working on ('Test' Link)
HTML:
<a><h1>Test</h1></a>
SCSS:
* {
transition: all .15s ease-in;
}
a {
color: inherit;
&:hover {
color: blue;
}
}
h1 {
color: black;
}
It seems that you did not follow color assigning. The weird behavior could be associated with to this improper use. A:hover must be placed after the A:link and A:visited rules, since otherwise the cascading rules will hide the 'color' property of the A:hover rule. Similarly, because A:active is placed after A:hover, the active color (lime) will apply when the user both activates and hovers over the A element.
link {color: blue;}
visited {color: purple;}
hover {color: red;}
active {color: yellow;}
Related
Is it possible to specify the hyperlink color within the main CSS properties statement like below? I have tried several variations and no luck.
width: 100%;
color: #FFF;
background-color: #693F18;
a.link-color: #fff;
There are several different ways to style a hyperlink: a for the link itself, along with the following pseudo-classes:
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked
To change the colour, you're looking for the color property.
This can be seen in the following:
a {
color: cyan;
}
a:link {
color: blue;
}
a:visited {
color: red;
}
a:hover {
color: green;
}
a:active {
color: purple;
}
Link
I have an anchor tag with 2 spans in it...
<a class="banner-logo" href="/search"><span id="banner-logo-hello">Hello</span><span id="banner-logo-world">World</span></a>
On hover of this anchor tag, I want to change the color of the text inside the spans, but I want them to each be a different color. Right now, I can only get one span to transition at a time. How can I get both transitions to occur simultaneously regardless of which span inside of the anchor tag is hovered on?
#banner-logo-hello:hover,
#banner-logo-hello:active,
#banner-logo-hello:focus {
color: red;
transition: 0.5s;
}
#banner-logo-world:hover,
#banner-logo-world:active,
#banner-logo-world:focus {
color: yellow;
transition: 0.5s;
}
Target a:hover #span-id-name {} for both of the spans
a:hover #banner-logo-hello {
color: red;
}
a:hover #banner-logo-world {
color: yellow;
}
<a class="banner-logo" href="/search"><span id="banner-logo-hello">Hello</span><span id="banner-logo-world">World</span></a>
You can also target via :nth-child, or it's variations like :first-child or :last-child or :nth-of-type
a:hover span:last-child {
color: red;
}
a:hover span:first-child {
color: yellow;
}
<a class="banner-logo" href="/search"><span id="banner-logo-hello">Hello</span><span id="banner-logo-world">World</span></a>
Problem with Chrome when displaying my css styles:
The horizontal nav should have background grey and
text color black but on Chrome get maroon and text white.
On I.E 9 works fine but on Chrome not.
The style for the second nav looks ok.How do I resolve these conflicting styles.
Here is my codepen:
http://cdpn.io/uCgyF
add the shiv to your head
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
Add id to the ul and style accordingly as in this fiddle
<ul id="firstNav">
nav #firstNav a:link,a:visited{
color: black;
background-color:grey;
display: block;
}
(skip to the bottom for tl;dr)
When I first loaded your pen, I saw things correctly. But then I clicked on one of the header links and saw the behavior you describe. That tells us that a :visited selector is probably the issue. Take a look at your css code (I removed some to help illustrate the point):
nav#navigation a:link, a:visited {
background-color:grey;
color: black;
}
aside a:link, a:visited {
background-color: maroon;
color: white;
}
the comma (,) doesn't do what you think it does. the comma in css is shorthand for writing the same definition twice, so if we didn't have that shorthand, your css would look like this:
nav#navigation a:link {
background-color:grey;
color: black;
}
a:visited { /* <-- oops! */
background-color:grey;
color: black;
}
aside a:link {
background-color: maroon;
color: white;
}
a:visited { /* <-- oops! */
background-color: maroon;
color: white;
}
with your css, every visited link on the entire site (whether it is in your nav or not) will be white on maroon.
as a general rule of thumb, add a new-line after each comma in css. It will help you see these errors more easily.
tl;dr: do this:
nav#navigation a:link,
nav#navigation a:visited {
background-color:grey;
color: black;
}
aside a:link,
aside a:visited {
background-color: maroon;
color: white;
}
I've a button and I wanted to know if it is possible to make the css bellow shorter.
.button a:link, .button a:visited, .button a:hover, .button a:active {
color: #000;
text-decoration: none;
}
I mean maybe:
.button a:* {
color: #000;
text-decoration: none;
}
Maybe there isn't any shorter way, but I just wanted to know.
I found something like this out:
.button a:link:visited:hover:active {
color: #000;
text-decoration: none;
}
But it wasn't working, don't know why..
For information - I've general css for a in the top of the file:
a:link {
color: #DA5632;
}
a:visited {
color: #CE3408;
}
a:hover {
color: #289BF8;
}
a:active {
color: #CE3408;
}
So the button class a should overwrite the main a css.
.button a is all you need
I always set a default style on a, and target pseudo classes only when I need to have a different effect.
Edit to include fix from comments:
Because a default style for the a element is declared like:
a:link {
color: #DA5632;
}
a:visited {
color: #CE3408;
}
a:hover {
color: #289BF8;
}
a:active {
color: #CE3408;
}
at the top of the stylesheet, we need to make it body .button a by increasing selectivity we increase the importance of the styles applied.
Here are some things to try
make sure that your stylesheet has a rule for ".button a" - also make sure this stylesheet is included after the global one defining rules for "a".
If that doesn't work, try being more specific, as in: ".button > a", only selecting direct descendants.
If THAT doesn't work, while it's bad practice, you could always mark your styles as important, like so:
color: #fff !important;
this will demand that they are parsed last.
If I have this CSS:
a:link { color: blue; }
a:hover { color: red; }
#someID a:link { color: black; }
Links under the ID always appears in black on hover. I'm aware that using an ID gives a higher priority, however, I'm not overriding the :hover selector, only the :link selector, so shouldn't the hover display in red?
The :link pseudo class applies to the link even when you are hovering over it. As the style with the id is more specific it overrides the others.
The only reason that the :hover style overrides the :link style at all is that it comes later in the style sheet. If you place them in this order:
a:hover { color: red; }
a:link { color: blue; }
the :link style is later in the style sheet and overrides the :hover style. The link stays blue when you hover over it.
To make the :hover style work for the black link you have to make it at least as specific as the :link style, and place it after it in the style sheet:
a:link { color: blue; }
a:hover { color: red; }
#someID a:link { color: black; }
#someID a:hover { color: red; }
There's an order issue, as explained in W3Schools:
Note: a:hover MUST come after a:link
and a:visited in the CSS definition in
order to be effective!!
Note: a:active MUST come after a:hover
in the CSS definition in order to be
effective!!
http://www.w3schools.com/CSS/css_pseudo_classes.asp