I'm using bootstrap for my website with a link that opens a new tab. In my desktop browser, the link remains focused(red) after I close the tab(without moving my mouse pointer in the window).
I added onclick="this.blur() to remove the focus(red), but hover is still in effect(green).
How to I remove both focus and hover?
CSS file:
a {
color:black;
}
a:hover {
color:green;
}
a:focus {
color:red;
}
HTML file:
google
simply override it in CSS using the same color as the link,
a, a:hover, a:focus{
color:black;
}
and if you want, you can override :visited and :active too
a, a:hover, a:visited, a:active, a:focus{
color:black;
}
Here is a snippet
a,
a:hover,
a:visited,
a:active,
a:focus {
color: black !important;
}
/*important used for demo only*/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
google
Use this:
a:active, visited {
color:black;
}
active is the state a link has after you clicked it. You won't loose the hover effect in this case.
Related
I'm using Bootstrap3 for a small website, and I need to change the link color in one of my divs.
However, for some reason, the bootstrap link colors are always being applied instead of my custom ones.
CSS:
.social a,
.social a:hover,
.social a:focus {
color: #fefefe;
}
HTML:
<div class="social">
<i class="fa fa-linkedin"></i>
</div>
I also tried this:
.social > a,
.social > a:hover,
.social > a:focus {
color: #fefefe;
}
But doesn't make a difference.
#fefefe is a white color. Maybe you have white content on a white background.
It should work.
body {
background-color: darkgrey;
}
.social a,
.social a:hover,
.social a:focus {
color: #fefefe; // white
}
Example
Try adding .social a:link to the list
either add !important to your style:
color: #fefefe!important;
or better, make sure your styles are loaded AFTER bootstrap:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/mystyle.css">
EDIT:
if <a> tags is what want to style you might want to apply your color to :link and :visited too:
.social a,
.social a:link,
.social a:visited,
.social a:hover,
.social a:focus {
color: #fefefe;
}
I'm working on a project that has these requirements:
When hovering over a section with anchors, the colors of all anchors in that section (non hover/active state) change.
The active/hover state color of these anchors should inherit the normal anchor active/hover color.
I was able to achieve the first requirement, but the active/hover states don't change at all when hovering over the specific link. It's obviously an issue with specificity, but I can't seem to figure out why.
Here is a boiled down version of the code: http://codepen.io/dbough/pen/maxrv
a:link, a:visited {
color:green;
}
a:hover, a:active, header .color a:hover, header .color a:active {
color:pink;
}
.color a:link, .color a:visited{
color:red;
}
$("header").hover(function() {
$("header").addClass("color");
},
function() {
$("header").removeClass("color");
}
)
In the simplest terms.
Define a color for all links
Set a hover color hased on the ul being hovered
Set a different colow when the a is hovered
a:link {
color:green;
}
ul:hover a {
color:pink;
}
ul a:hover {
color:red;
}
Codepen Example
Does that not meet the criteria(?)...and no JS required
This has nothing to do with specificity, your selector just doesn't match.
header .color a:active {
You are using JavaScript to add a class to the <header> element, but you are writing a selector where the element with the class is a descendant of the <header>.
Remove that descendant combinator from the selectors:
header.color a:active {
delete your style and jquery hover function and try use this (only css):
html,body {
margin:0;
padding:0;
}
header {
width:50%;
padding:auto;
margin:auto;
}
li {
display:inline;
padding:50px;
}
a, a:link, a:visited{
color:green;
}
a:hover, a:active{
color:pink !important;
}
header:hover a{color:red;}
I have css:
a:visited {
text-decoration: none;
color: #CCC;
}
a:hover {
text-decoration: underline;
color: #fff;
}
a:active {
text-decoration: none;
color: #CCC;
}
the hover does not work when i first load the webpage however when i click on the hyperlink then go back the hover then works. What is the issue.
Maybe there is some extra CSS hanging around somewhere... You could try resetting CSS at the beginning of your file:
a:visited, a:hover, a:active { text-decoration:none; }
Test your code at the seperate page of your project, I think it works, if it works, there is something else in your project that makes it incorrect, I mean external css
Why the following styling of the link does not work ?
<html>
<head>
<style type="text/css">
a:link {color:#123456;} /* unvisited link */
</style>
</head>
<body>
Visit Google
</body>
</html>
Thanks !
For some general best practices, the link styling hierarchy works like this:
a:link {
color: #ff0000;
}
a:visited {
color: #ff0000;
}
a:hover {
color: #cccccc;
}
a:focus {
color: #cccccc;
}
a:active {
color: #cccccc;
}
It's best to always apply all of these, whether you do them singly as above or like this:
a:link, a:visited {
color: #ff0000;
}
a:hover, a:focus, a:active {
color: #cccccc;
}
But regardless, the order is very important and things can be overwritten if it isn't followed.
It's because the link has been visited.
Try
a {color: blue;} /* unvisited link */
a:visited {color: orange;} /* visited link*/
If you remove the last declaration links will be blue regardless of :visited.
And you shouldn't rely on it working in the future:
http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/
The CSS active link style is being correctly applied in IE7, FF, and Safari but is not applied IE6.
.side_nav a.active
{
color:#FFFFFF;
background-color:#9F1F63;
}
Interestingly the background color (background-color:#9F1F63;) is being applied in IE6 but not the font color (color:#FFFFFF;)
Any ideas on why this is happening and how I can fix it appreciated.
The complete styling for the nav below:
.side_nav
{
text-align : left;
margin-left: -10px;
}
.side_nav ul
{
list-style-type: none;
list-style-position:inside;
margin-left:0px;
}
.side_nav li
{
margin-top: 10px;
display: list-item;
list-style-type:none;
}
.side_nav a, .side_nav a:visited
{
text-decoration: none;
color : #9F1F63;
font-weight : bold;
padding: 5px 10px 5px 10px;
}
.side_nav a:hover
{
color:#B26D7F;
}
.side_nav a.active
{
color:#FFFFFF;
background-color:#9F1F63;
}
EDIT: Thanks but the suggestions haven't helped. When I change to a:active the active effect does not work in any browser. I think this might be due to how I have applied the style in the HTML.
<div class="side_nav">
<a class="active" href="Page1.aspx">Page1</a><br />
Page2<br />
Page3<br />
</div>
In IE6, it matters which order you specify the anchor links. You should specify them in this order to achieve the intended result: first a:link, then a:visited, a:hover and a:active.
Your CSS has a period where there should be a colon, in .side_nav a.active (should be .side_nav a:active
With this fixed, it works for me in IE6.
I tried copying your code, and the format did work.
Your problem is you see the link as visited - you have both formatting of the visited and active (so you have the purple background and the purple text).
You should override the color for visited links with the active class:
.side_nav a.active, .side_nav a.active:visited
{
color: #FFFFFF;
background-color: #9F1F63;
}
Try adding a more specific selector to .side_nav a.active such as div .side_nav a.active where div is the parent element.
The color is probably being overwritten from the .side_nav a rule.
Also, you may have a typo - are trying to use the :active selector?
Try to use !important. Like this:
.side_nav a.active
{
color: #FFFFFF !important;
background-color: #9F1F63;
}