The hyperlink's initial colour is blue, i.e,, of the visited selector. But the background-colour is black, i.e., of the link selector. Additionally, after visiting the link once, the text colour remains blue as it should be, but the background does not transform to transparent.
Here is the styling code:
<style>
a:link {
color: pink;
background-color: black;
text-decoration: none;
}
a:visited {
color: blue;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
</style>
</head>
<body>
<h2>Link Colors</h2>
HTML Images
</body>
</html>
I am not able to understand the behaviour of the link selectors. Why is the formatting unclear, and am getting the random mixed-output from the two different and exclusive selector?
Visited: A link when it has already been visited (exists in the browser's history), styled using the :visited pseudo-class.
So if you have visited your link at least once it will always be visited
You can read more about this here.
You need to add some background-color to anchor tag and add link with visited for visited to work like a:visited:link. Try below CSS :
a:link {
color: pink;
background-color: black;
text-decoration: none;
}
a:visited:link {
color: blue;
background-color: transparent !important;
text-decoration: none;
}
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
a {
background-color: #fff;
}
Related
I am trying to create a Jekyll blog template. I want to show an font awesome external link icon along with hyperlinks on every article. So I wrote CSS like:
#myLink a[href^="//"]:after,
#myLink a[href^="http://"]:after,
#myLink a[href^="https://"]:after {
content: "\f35d";
font-family: "Font Awesome 5 Free";
font-weight: 900;
margin: 0 0 0 5px;
}
#myLink a:link {
color: blue;
background-color: transparent;
text-decoration: none;
border-bottom: 1px solid red;
}
#myLink a:visited {
color: hotpink;
background-color: transparent;
text-decoration: none;
}
#myLink a:hover {
color: green;
background-color: transparent;
text-decoration: none;
}
#myLink a:active {
color: blue;
background-color: transparent;
text-decoration: underline;
}
Then I wrote article as follows:
<article id="myLink">
.....
....
</article>
It works. But if I add Image as an external link
It will shows font awesome external link after image. How can I remove that icon for images?
I have this for my default css which is exactly what I want for the majority of my webpage (RED and then it underlines on hover)
a:link, a:visited{
color: #F00;
text-decoration: none;
}
a:hover, a:visited:hover{
color: #F00;
text-decoration: underline;
}
However in some cases I want it to be White and but then still turn red on hover, and I was hoping to override the white on the occasions I need to as it is far less common than the other style.
I tried
a href="/" style="color:#FFF">Home
This overrides the colour for both parts which makes sense for why it is doing it, but I want it to only overwrite the static link and not the on hover.
Any help would be appreciated!
Thanks
You can use a class, take a look at this
article {
background: #ccc;
padding: 20px;
}
a:link, a:visited{
color: #F00;
text-decoration: none;
}
a:hover, a:visited:hover{
color: #F00;
text-decoration: underline;
}
a.white:link, a.white:visited{
color: #FFF;
text-decoration: none;
}
a.white:hover, a.white:visited:hover{
color: #F00;
text-decoration: underline;
}
<article>
<p>
normal
</p>
<p>
alternate
</p>
</article>
Use a class with the color white defined, then apply this class to each anchor that should be white. In CSS...
a.white:link, a.white:visited {
color:#ffffff;
}
In HTML...
...
Just use a class for this.
body {
background: gray;
}
a.whiteLink {
color: white;
}
a {
color: #F00;
text-decoration: none;
}
a:hover {
color: #F00;
text-decoration: underline;
}
Home
I'm sure this is a rather simple fix but I haven't been able to figure it out.
I used the page properties in Dreamweaver to come up with the CSS for the links on the page and everything was working correctly. I now have one row where I need to change both the link and hover colors for a few links.
<head>
<style type="text/css">
<!--
body {
background-color: #666666;
}
a:link {
color: #000000;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #000000;
}
a:hover {
text-decoration: none;
color: #666666;
}
a:active {
text-decoration: none;
color: #000000;
-->
</style>
</head>
I was able to change the link color successfully by using the code below in the body.
Website
What I have not been able to do successfully is change the rollover. I've searched and tried a few different methods to solve the problem but haven't had any success. Could somebody point out what I'm doing wrong or give me an example of how the CSS should look?
Give your special links a special class:
CSS
.link
{
color: rgb(20, 80, 153);
}
.link:hover{..}
.link:active{..}
.link:visited{..}
HTML
Website
So to colour the link you just need:
a{
color: rgb(20,80,153);
text-decoration: none;
}
Then if its hover you want:
a:hover {
color: red;
}
HTML:
Website
CSS:
a{
color: rgb(20,80,153);
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #000000;
}
a:hover {
color: red;
}
DEMO HERE
On top of that, if you do not want it for ALL links you give them a class:
HTML:
Website
CSS:
.test {
color: rgb(20,80,153);
}
.test:hover {
color: red;
}
DEMO HERE
use class names instead of just targeting the a
CSS
a.someName1:link {
color: #000000;
text-decoration: none;
}
a.someName1:visited {
text-decoration: none;
color: #000000;
}
a.someName1:hover {
text-decoration: none;
color: #666666;
}
a.someName1:active {
text-decoration: none;
color: #000000;
}
HTML
Website
The easiest way to change the colors for a entire row would be to add a class to said row (or <tr>, I'm assuming) and then add CSS for all links that are descendants of a element with that class.
I'm making some assumptions on your HTML, but it will probably go something like this...
HTML:
<tr class="atl-color">
<td>Link #1</td>
<td>Link #2</td>
</tr>
CSS:
.alt-color a:link { color: blue; }
.alt-color a:hover { color: red; }
I have these styles for all my a links globally. I am not able to override the a link style in a div on the same page.
a, a:visited{
outline: 0;
cursor: pointer;
color: inherit;
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
Now I want to override the style for anchor link to change its color to white on hover but only in a div of multiple classes unseen and notification container like this one...
<div class="unseen notificationContainer">
<a href="profile?customerId=1365764036258">
<strong>robert</strong>
</a>
sent you a friend request
<a href="friend_request?type=accept¬ificationId=1365764054463">
Accept
</a>
<a href="friend_request?type=reject¬ificationId=1365764054463">
Reject
</a>
</div>
so I add the following to my CSS
.unseen{
background: #09f;
color: #fff;
}
.unseen a :hover{
color: #fff;
text-decoration: underline;
}
When the page loads hovering on first link makes changes its color to white but the other three take the color blue of the background. I have been on this for the past one hour and not it's just irritating. Style for notificationContainer is as below
.notificationContainer{
width: 390px;
float: left;
border-bottom: solid 1px #eee;
padding: 5px;
}
Thanks in advance.
CSS cannot possibly have bugs, only a browser can (unless you mean errors in the CSS specification, etc).
That said, this is a bug in your code and not with the browser:
.unseen a :hover{
color: #fff;
text-decoration: underline;
}
The space between a and :hover means any element that is :hover and within a, much like .unseen a means a elements within .unseen, so that won't work. You need to remove that space:
.unseen a:hover{
color: #fff;
text-decoration: underline;
}
Not really sure what you're after - your question doesn't really make it clear. Forgive me if I've miss-guessed. Does this help? (You can target elements with multiple classes)
<style>
a, a:visited{
outline: 0;
cursor: pointer;
color: inherit;
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
.unseen.notificationContainer a:hover
{
background: #09f;
color: #fff;
text-decoration: underline;
}
.notificationContainer
{
display: inline-block;
float: left;
border-bottom: solid 1px #eee;
padding: 5px;
}
</style>
and
<div class="unseen notificationContainer">
<strong>robert</strong>
sent you a friend request
Accept
Reject
</div>
I have a hyperlink in my website that I want to be part #A0A0A0 and part #880000 for a:link and a:visited, and I want it to change to part #FFFFFF and part #AA0000 for a:hover and a:active. But I want it to be all one link. I have tried two solutions so far, but neither worked out the way I want.
The first was:
a.menu:link { color: #a0a0a0; text-decoration: none; }
a.menu:visited { color: #a0a0a0; text-decoration: none; }
a.menu:hover { color: #ffffff; text-decoration: none; }
a.menu:active { color: #ffffff; text-decoration: none; }
<a class="menu" href="/about.html">Dubious
<span style="color: #880000;">Array</span>
.net</a>
In this solution, the color of the middle part ('Array') stays as #880000 the whole time and doesn't change to #AA0000 for :hover or :active.
The second solution was to create a <a> </a> for each part of the string (so one for 'Dubious', one for 'Array' and one for '.net') and have the css for the middle <a> </a> be
a.redMenu:link { color: #880000; text-decoration: none; }
a.redMenu:visited { color: #880000; text-decoration: none; }
a.redMenu:hover { color: #AA0000; text-decoration: none; }
a.redMenu:active { color: #AA0000; text-decoration: none; }
The colors worked fine this way; but the string was three separate links, so mousing over one link wouldn't change the color in the others.
So what I want to be able to do is to change the css in the middle of a hyperlink from a.menu to a.redMenu then back again to a.menu, but I can't work out how. Can anyone here solve my problem?
Thanks, Jacob
You can use your original HTML, just remove the inline style:
<a class="menu" href="/about.html">
Dubious<span>Array</span>.net
</a>
Then simply add these css declarations for span:
a.menu:link span, a.menu:visited span{color: #880000;}
a.menu:hover span, a.menu:active span {color: #aa0000;}
a.redMenu:hover span { color: #AA0000; text-decoration: none; }
This tells the span what color to be when it's parent link is hovered.
<html>
<head>
<style type="text/css">
p { background: #00c }
a.menu:link { color: #a0a0a0; text-decoration: none; }
a.menu:visited { color: #a0a0a0; text-decoration: none; }
a.menu:active { color: #ffffff; text-decoration: none; }
a.menu:hover span.normal { color: #800 }
a.menu:hover span.hilite { color: #880 }
</style>
</head>
<body>
<p><a class="menu" href="/about.html"><span class="normal">Dubious
<span class="hilite">Array</span> .net</span></a>
</p>
</body>
</html>