I have a base CSS that defines this:
a:hover, a:focus {
color: black;
}
I want to have a specific link that overrides and does not trigger focus, but still triggers hover.
How can i do something like this to override the color setting?
a:focus{
color: none;
}
I've tried color:transparent to no avail, focus still triggers.
Try This
a:hover{
color:green;
}
.class:hover, .class:focus {
color: red;
}
dsadsfdsfsd
dsadsfdsfsd
I think you might need like this. This will inherit the color from parent.
a:focus {
color: inherit !important;
}
Please apply this css.
a:hover { text-decoration: none !important; color :none; border: 0px; -moz-outline-style: none;}
a:focus { text-decoration: none !impoartant; outline: none;-moz-outline-style: none;}
You should use initial to set element style to default.
a:focus {
color: initial !important;
}
Related
I have used the following color for css.
a:link,
a:active {
color: #e67e22;
text-decoration: none;
padding-bottom: 1px;
border-bottom: 1px solid #e67e22;
}
a:active,
a:hover {
color: #555;
text-decoration: none;
padding-bottom: 1px;
border-bottom: 1px solid #e67e22;
}
This is the corresponding html
#omnifood_berlin
But the color being displayed or computed is different as shown below.
What can be a reason for this? How can I make it the color I specified?
First, add this as mentioned in my comment:
a { color: #e67e22; }
Also note that you have active twice, as mentioned in a comment. Next, read through the official docs https://www.w3schools.com/css/css_link.asp particularly this bit
When setting the style for several link states, there are some order
rules:
a:hover MUST come after a:link and a:visited a:active MUST come after
a:hover
Follow those rules and I think your problem will be resolved.
I'm just starting to learn HTML and CSS and was testing out some simple CSS when strange things started happening.
Here is my CSS.
a:link {
color: blue;
text-decoration: none;
}
a:visited {
color: purple;
text-decoration: dotted;
}
a:hover {
color: blue;
text-decoration: dotted;
}
a:active {
color: blue;
text-decoration: dotted;
}
a:hover and a:active do not always do what they're supposed to. It's really confusing me because if I change the blue in a:hover's color: blue; to black it suddenly works.
I am editing the HTML and CSS files in Visual Studio 2012 and opening them in Google Chrome from the Dropbox folder they're saved in.
How can you differentiate between a:link and a:hover? Normally, it's a:link that's blue. Now, when you hover over it, it's a:hover that's also blue. Changing a:hover to black will let you see the difference.
A few things to consider:
In order for a:link to work you have to include a an actual link (href="somewebsite"). Otherwise you should be targeting just the a.
A lot of people think the active state is after you clicked on it thus making it "active" but it's on mousedown. Click the link and hold the mouse to see the :active triggered
In your example you have a:link AND a:hover set to blue so you will see no change when you hover over it.
text-decoration: dotted is not a property. You can choose from none, underline, overline, line-through, initial and inherit
EXAMPLE
a:link {
color: black;
text-decoration: none;
}
a:visited {
color: purple;
}
a:hover {
color: green;
text-decoration: underline;
}
a:active {
color: red;
text-decoration: line-through;
}
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
I'm trying to build my first site and am trying to use the "a:hover" feature in CSS but can't get it to work - the links look the same whether hovering or not.
Here's a snippet of my CSS file:
/* main page elements */
a:link
{
text-decoration: none;
color:white;
}
a:visited
{
text-decoration: none;
color:FFFFFF;
}
a:hover
{
text-decoration: none;
color:blue;
}
a:active
{
text-decoration: none;
color:blue;
}
Any help appreciated.
Thanks,
Robert.
You need to finnish the text-decoration instruction :P
text-decoration: none;
or
text-decoration: underline;
I hope you need to change the color in hover state
Try something like this one
eg.
HTML
<a href ='#'> Hover Me </a>
css
a
{
text-decoration: none;
color:#000000;
}
a:hover
{
color:#3399FF;
}
Your might be transitioning from a:active to a:hover, which has the same color. Therefore you see no difference. Try setting a unique color for a:hover, and see what happens.
It would also help if you make a jsfiddle.
Your issue is in the text-decoration: parts, if you remove them or use a valid syntax your CSS should work.
How can I apply a font color only to hyperlinks which have already been visited and are being hover by the mouse?
Essentially, what I want to do is
a:visited:hover {color: red}
Yes that is possible.
Here’s an example:
<style type="text/css">
a:link:hover {background-color:red}
a:visited:hover {background-color:blue}
</style>
foobar
There is a css declaration order for this to work properly as was mentioned earlier, although it didn't cover this particular option, it does make a difference. I've tested this on Chrome.
The order is
a:link { color: red; }
a:visited { color: blue; }
a:visited:hover { color: yellow; }
a:hover { color: green; }
a:active { color: gray; }
It will work whether it comes before or after a:hover as long as both a:hover and a:visited:hover are after a:visited and before a:active. I just prefer to keep the two visited links together and the two hovers together.
there is a sequence between link css to take effect..
a:hover must come after a:link and a:visited and a:active must come after a:hover
for more details refer below link..
http://www.w3schools.com/css/css_pseudo_classes.asp
FWIW, I was unable to style just color on a:visited:hover (Chrome/FF) without declaring a background for :link:hover (anything other than none or inherit seems to work, I used rgba() for alpha sake).
For this to work in Chrome/FF:
a:visited:hover {
color: #f00;
}
... (something like) this must be present:
a:link:hover {
background-color: rgba(255, 255, 255, 0);
}