When I define a color for :visited it seems to go back to the parent's color first before applying the color for the :hover style:
body {
color:black;
}
a {
color:inherit;
-webkit-transition:ease 3s;
}
a:visited {
color:pink;
}
a:hover, a:visited:hover {
color:yellow;
}
JsFiddle
Is there a hack/fix for this?
This is because Firefox does not allow certain styles on :visited, for privacy reasons.
Related
I have links
I am trying to make link #one black on :visited and #two blue. When visiting #two reverse should apply #one should be blue and #two should be black. I am trying to color the last visited link black and others to default. I tried
a {
color:blue;
}
a:visited ~ a:not(:visited){
color:red
}
I am trying to achieve this with just CSS without using JS.
a {
color:blue;
}
a:visited{
color:black;
}
There is a problem that i can't solve.
I am trying to make button from text by changing it on hover. I am using css to change their font color or background color on hover. There is no problem to this point.
But when i give them a link <a href="www.twitter.com"> I have a problem because at this point my css doesn't work because of html's link hover and visited functions.
The big problem is visited .. i don't want the visited color to work. If visited color works, my links doesn't look like good.
If you can help me about links in texts (making hover) without problem of active section...
Thanks
By giving the link ("a") the css propertie text-decoration:none; the element wont use the underline and visited color any more.
a{
text-decoration:none;
color:white;
}
a:hover{
color:red;
}
div{
background-color:#000;
}
http://jsfiddle.net/7rrruajb/1/
Hope this is what your looking for.
a:visited{
text-decoration:none;
}
Just use a instead of a:link - a applies to unvisited and visited link, a:link just unvisited ones.
Compare the two:
a:link
a:link {
color:red;
}
a:hover {
color:white;
}
<div style="background-color:#666">
hello
</div>
a
a {
color:red;
}
a:hover {
color:white;
}
<div style="background-color:#666">
hello
</div>
I have a basic menu bar not unlike the SO one next to the logo (so questions, tags etc.). I have all the styling, but it changes when I add links in. This is hard to explain, so here is my menubar styling:
div.menubar ul
{
background-color:#FF0000;
list-style-type:none;
margin:0;
padding:0;
padding-top:6px;
padding-bottom:6px;
}
div.menubar li
{
display:inline;
margin:0;
padding:0;
}
div.menubar a:hover, div.menubar a:active
{
background-color:#00FF00;//should highlight in green on mouseover
}
div.menubar a:link, div.menubar a:visited
{
font-weight:bold;
color:#FFFFFF;
background-color:#FF0000;
text-align:center;
padding:6px;
text-decoration:none;
text-transform:uppercase;
}
And the menubar code:
<div class = "menubar">
<ul>
<li>Home</li><!--does not work-->
<li>News</li><!--works-->
<li>Contact</li>
<li>About</li>
</ul>
</div>
When the link href is something like #home the link background changes to green on mouseover. However, when the link href is home.php, nothing happens. Why is this happening?
As a quick fix, move the hover state to the bottom of your CSS.
In the long term look at the CSS specificity and make sure you're not overriding your hover state with something more 'important'
Fiddle here: http://jsfiddle.net/mq7n3/
Move this to the bottom
div.menubar a:hover, div.menubar a:active
{
background-color:#00FF00;//should highlight in green on mouseover
}
div.menubar a:hover //this is overridden by below rule, div.menubar a:active //This works
{
background-color:#00FF00;//should highlight in green on mouseover
}
div.menubar a:link{ //this is overriding div.menubar a:hover
background-color:#FF0000;
}
Try either putting the :hover rule after the :link rule, removing the :link (is it necessary?), or adding in !important to the :hover rule (not recommended).
You can remove a line of code to get it working
div.menubar a:link, div.menubar a:visited
{
font-weight:bold;
color:#FFFFFF;
/* background-color:#FF0000; REMOVED */
text-align:center;
padding:6px;
text-decoration:none;
text-transform:uppercase;
}
See it working
This works if your anchor tag has a # or not (although no idea why on the original issue)
I'm currently having a text as hyperlink and on this some CSS code is getting applied. Due to which on hover the text got underline and font gets bold on hover event. But now what I want to do is remove the hyperlink and apply the same effect bydefault i.e. not on hover. In short I want to apply the style currently applying on hover without hovering the text. My HTML and css code is as follows:
.faq .section p.quetn a:hover {
text-decoration:underline;
font-weight:bold
}
<p class="quetn">5.14 Where do i see my test results?</p>
One more important thig is I can't change the above written CSS, I want to override the above CSS code by writing a new class. Can you help me in achieving this? Thanks in advance.
Just use the same rule for when the link is not being hovered:
.faq .section p.quetn a, .faq .section p.quetn a:hover {
text-decoration:underline;
font-weight:bold
}
EDIT
Juse seen that you can't change the CSS for some reason.
Just create a new class with the same styles.
a.class, a.class:hover {
text-decoration:underline;
font-weight:bold
}
<a class="class" title="" href="#">Some Link</a>
EDIT v2
Do you want to style the text but remove the link markup?
It would just be
<p class="class">Text</p>
p.class {
text-decoration:underline;
font-weight:bold
}
Like this
demo
css
.quetn a:hover {
text-decoration:underline;
font-weight:bold;
}
Then instead using
.faq .section p.quetn a:hover
use
.faq .section p.quetn a
If you are targeting only P tag instead of anchor tag, then use it as below :
.faq .section p.quetn
html
<p class="quetn newClass">5.14 Where do i see my test results?</p>
css
.quetn a:hover {
text-decoration:underline;
font-weight:bold;
cursor:default;
}
.newclass a:hover{
text-decoration:none; !important
font-weight:bold; !important
cursor:default; !important
}
Use !important for priority.
Code below for Hover Enable
a:hover {
background-color: yellow;
}
Code below for Hover Disable
a:nohover {
background-color: yellow;
}
How can I make a link in HTML turn a color when hovering and remove the underline using CSS?
You want to look at the :hover pseudoselector, the color property, and the text-decoration property.
a:hover { color: red; text-decoration: none; }
To assure your hyperlink is styled as you want (and does not conflict with other style rules), use !important:
a:hover { color: red !important; text-decoration: none !important; }
Also in addition to stragers answer, make sure to declare the pseudo classes in the LoVe HAte way. You have to declare :link first, then :visited, then :hover and then :active. Otherwise some browsers may not apply the pseudo classes.
a:link{
/*this only apllies to named anchors*/
}
a:visited{
/*possible styles for visited links*/
}
a:hover{
/*when mouse hovers over a-tag*/
text-decoration:none;
color:red;
}
a:active{
/*possible styles on active (when a-tag is clicked)*/
}