I have the following html code:
<a class="deletelink" onclick="return !deleteitem('delete.php')" href="delete.php"> Delete Item </a>
with the following css:
a.deletelink:hover,
a.deletelink:active {
background-color: #F00;
color:#FF0;
}
a.deletelink:visited,
a.deletelink:link {
line-height:5em;
width: 5em;
text-align: center;
margin:2em;
display: block;
font-weight: bold;
color:#F00;
background-color:#639;
padding: 0.5em;
text-decoration: none;
}
but the color of the link will not change when mouse moves over it. Could you guess what is wrong here?
thanks
Note that :hover must come after :link and :visited pseudo classes, otherwise it won't affect the element.
a.deletelink:visited ,a.deletelink:link{ /* ... */ }
a.deletelink:hover, a.deletelink:active { /* ... */ }
From MDN page:
This style may be overridden by any other link-related pseudo-classes,
that is :link, :visited, and :active, appearing in subsequent rules.
In order to style appropriately links, you need to put the :hover
rule after the :link and :visited rules but before the :active one, as
defined by the LVHA-order: :link — :visited — :hover — :active.
Just change the order of hover behaviour:
a.deletelink:visited ,a.deletelink:link{line-height:5em;width: 5em;text-align: center; margin:2em;display: block;font-weight: bold;color:#F00;background-color:#639;padding: 0.5em;text-decoration: none;}
a.deletelink:hover, a.deletelink:active{ background-color: #F00; color:#FF0;}
working demo here
:hover must be used after :link , :visited
You should follow the LoVeHAte formula where L denotes Link, V denotes Visited, H denotes Hover and A denotes Active.
You have to use hover after :link and :visited properties :
a.deletelink:visited,
a.deletelink:link {
line-height:5em;
width: 5em;
text-align: center;
margin:2em;
display: block;
font-weight: bold;
color:#F00;
background-color:#639;
padding: 0.5em;
text-decoration: none;
}
a.deletelink:hover,
a.deletelink:active{
background-color: #F00;
color:#FF0;
}
a.deletelink:active{ background-color: #F00; color:#FF0;}
a.deletelink:hover { background-color: #F00;color: #FF0;}
a.deletelink:visited {line-height:5em;width: 5em;text-align: center; margin:2em;display: block;font-weight: bold;color:#F00;background-color:#639;padding: 0.5em;text-decoration: none;}
.deletelink {line-height:5em;width: 5em;text-align: center; margin:2em;display: block;font-weight: bold;color:#F00;background-color:#639;padding: 0.5em;text-decoration: none;}
that should do it for you
Related
So while having an a tag with the class btn I can style it by using .btn in my CSS. However some say it's a better practice to style your button with .btn:link instead of just .btn. Using :hover makes a clear difference on the output. But I was wondering what exactly the difference is between styling with or without :link
.btn:link {
background-color: #67c5fc;
border-radius: 100px;
padding: 10px;
text-decoration: none;
color: #000;
}
.btn:hover {
background-color: #0082ce;
cursor: pointer;
}
.btn2 {
background-color: #48c964;
border-radius: 100px;
padding: 10px;
text-decoration: none;
color: #000;
}
.btn2:hover {
background-color: #2eaa49;
cursor: pointer;
}
Button-with-:link
Button-without-:link
Here is explain:
The :link CSS pseudo-class represents an element that has not yet been
visited. It matches every unvisited <a>, <area>, or <link> element
that has an href attribute.
By default, most browsers apply a special color value to visited links.
When you use :link you can declare new style instead the default definition
Learn more here:https://developer.mozilla.org/en-US/docs/Web/CSS/:link
The :link selector is used to select unvisited links.
It is the opposite of the :visited selector.
<a>Link</a>
Can we prevent this element from having any hover effect without usin :hover?
I usually go:
a {
color= white;
}
a:hover {
color= white;
}
I've checked pointer-event= none; but it disabled the entire element and made it text.
You have some syntax error in your CSS, Please update your CSS with following code:
a, a:hover {
color: white;
}
a {
color: white !important;
}
/*
So you can actually see the white link
*/
div {
width: 50px;
height: 50px;
background-color: black;
}
<div>
link
</div>
or if you don't want to use :hover you just add !important in your default CSS
a {
color: white !important;
}
Note: for standard practice we don't use !important frequently. So you can add this css inline. You can check updated code below..
div {
width: 50px;
height: 50px;
background-color: black;
}
<div>
link
</div>
First of all. Don't use = inside CSS but use : instead.
To disable the hover (animation) do this:
a, a:hover {
color: white;
text-decoration: none;
}
a:hover {
cursor: text;
}
However, if you assign a href attribute the link will still be clickable.
This you cant disable by css but you need javascript or jquery for that.
Example
test
I define a css file my_style.css and use it in my page.
body {
background-color: linen;
}
.myClass1 a:link,
a:visited {
color: orange;
margin-left: 40px;
}
.myClass2 a:link,
a:visited {
color: green;
margin-left: 40px;
}
<html>
<head>
<link href="my_style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<a class="myClass1" href="http://www.youtube.com">Link1</a>
<a class="myClass2" href="http://www.youtube.com">Link2</a>
</body>
</html>
Why are both links green?
Both links are green because:
.myClass2 a:link,a:visited { /* foo */ }
reads as:
.myClass2 a:link { /* foo */ }
a:visited { /* foo */ }
and not as:
.myClass2 a:link { /* foo */ }
.myClass2 a:visited { /* foo */ }
You need to put the full selector in each part of the group.
.myClass2 a:link,
.myClass2 a:visited { /* foo */ }
Additionally, since the links themselves are members of the class, you don't want the descendant combinator in there.
a.myClass2:link,
a.myClass2:visited { /* foo */ }
You forgot the class selectors before the a:visited selectors
a.myClass1:link, a.myClass1:visited{
color: orange;
margin-left: 40px;
}
a.myClass2:link, a.myClass2:visited{
color: green;
margin-left: 40px;
}
You are applying stiles to a:visited, two times. The first time you're setting color: orange, the second one color: green.
Obviously both links are already visited since both are the same.
CSS stands for "cascading style sheets", that essentially means that the last properties override the first ones.
Your confusion might be in regards of how the , (comma) works. It means that the styles are to be applied to both selectors (what's before and what's after the comma).
Also, on your CSS the classes are applied to a parent of the a tag instead to the a tag itself. Here's an approach to a solution (since I don't know what you're trying to achieve:
/* this will apply to all <a> tags with class myClass1 */
a.myClass1 {
color: orange;
}
/* this will apply to all <a> tags with class myClass2 AND to all visited a tags even if they are of class myClass1 */
a.myClass2,
a:visited {
color: green;
}
/* This is so you don't write the same twice (DRY principle) */
a.myClass1,
a.myClass2 {
margin-left: 40px;
}
Essentially on your posted HTML, both links will be green. If you change one of them to a page you haven't visited, it will be orange.
your current css of:
.myClass1 a:link,
a:visited {
color: orange;
margin-left: 40px;
}
.myClass2 a:link,
a:visited {
color: green;
margin-left: 40px;
}
reads as the following:
for myClass1's descendant a anchor tag that hasn't been visited (link), and for a anchor tag that has been visited make text color orange and make its left margin 40px.
then for myClass2's descendant a anchor tag that hasn't been visited, and for a anchor tag that has been visited, make the text color green and make its left margin 40px;
as the others have said before, the , a:visited css is changing all the anchor tags to green because css applies its styles top down and green is the last reference of the element type.
you have to reference the full selector. that being said, the previous answers include the descendant selectors (which will not work) since the anchor element is the same as the class element. therefore something like this is what you're looking for
body
{
background-color: linen;
}
a.myClass1:link, a.myClass1:visited{
color: orange;
margin-left: 40px;
}
a.myClass2:link, a.myClass2:visited{
color: green;
margin-left: 40px;
}
<a class = "myClass1" href = "http://www.youtube.com">Link1</a>
<a class = "myClass2" href = "http://www.youtube.com">Link2</a>
by not leaving the space between a and .Class1, the css denotes that they are the same element (versus the space in between them denoting descendant of)
hope this helps
I have a page at http://www.problemio.com/problems/problem.php,
and you see on the bottom-right I have a teal image. It is really a link and in that link I can't seem to get the text color to appear white.
Here is my CSS:
.button
{
display: block;
background: #4E9CAF;
padding: 10px;
text-align: center;
border-radius: 5px;
color: white;
text-color: white;
font-weight: bold;
text-decoration: none;
}
a:button.visited
{
display: block;
background: #4E9CAF;
padding: 10px;
text-align: center;
border-radius: 5px;
color: white;
text-color: white;
font-weight: bold;
text-decoration: none;
}
and here is how I make the link with HTML:
<a class="button" id="follow_problem" href="#" title="...">Follow Problem</a>
Any idea what is going wrong and why the color of the link isn't white?
It appears that you're trying to override the styling of the a:link class Try:
Option 1:
Here is the class you're trying to override:
a:link {
color: #3686A7;
text-decoration: none;
}
You need to add !important to the end of your style declaration:
.button {
color: white !important;
}
Option 2:
You could further define the a:link class rules:
a:link.button {
color: white;
}
That's because a:link (line 95) is more specific than .button (line 109).
You can fix it by changing the rule to
.button,
a:link.button {
/* rules */
}
Tips:
While using !important will work, it is a silly workaround that will eventually get you in trouble, and it is actually a misuse - http://www.w3.org/TR/CSS2/cascade.html#important-rules
Use Firebug for Firefox, or Chrome's inspect element, to check the css affecting a given element.
In your .button class, use this: color: white !important;. The problem happens because the a style declaration is applied after the .button declaration, in effect cancelling the color you have set in favor of the link 's color property. Using !important ensures the color rule is applied over any other.
That's because you have another class in common_elements.css that has higher priority than .button
a:link
{
color: #3686A7;
text-decoration: none;
}
Try making your .button more prioritized by !important
I have some html anchor link code, and unlike the rest of document I want it to look like it is not a link.
Is there a simple way to disable the style change caused by wrapping text in a anchor tag without having to brute force it to be the same (ie, if I change the body font style I don't have to also change some other :link stuff).
Setting color to black and text-decoration to explicitly none is a little more aggressive than worked for me.
I was looking for the CSS of the anchors to be "benign" and just blend into the existing CSS. Here's what I went with:
a.nostyle:link {
text-decoration: inherit;
color: inherit;
cursor: auto;
}
a.nostyle:visited {
text-decoration: inherit;
color: inherit;
cursor: auto;
}
Then I just added the CSS nostyle class to the anchors that I wanted to be unformatted.
I achieved this by creating a class .reset-a and targeting all of its' pseudo classes.
Targeting of all pseudo classes is important to make it flawless.
outline: 0 property removes the dotted border that surrounds a link when it is focused or active.
.reset-a, .reset-a:hover, .reset-a:visited, .reset-a:focus, .reset-a:active {
text-decoration: none;
color: inherit;
outline: 0;
cursor: auto;
}
If you don't care about IE, you can attach :not(#exclude) (where exclude is the ID of the link in question) to your link styles:
a:link:not(#exclude), a:visited:not(#exclude) {
text-decoration: none;
color: blue;
cursor: pointer;
}
Otherwise I don't think you can brute-force it the way you describe. You can either use an inline style instead (not recommended) or you can use a special class/ID assigned to that link, whose selector you'd group with body. For example, if you had these styles:
body {
text-decoration: none;
color: black;
cursor: auto;
}
a:link, a:visited {
text-decoration: none;
color: blue;
cursor: pointer;
}
You can simply toss in a more specific selector, that'd match that link, onto the body rule:
body, #exclude {
text-decoration: none;
color: black;
cursor: auto;
}
a:link, a:visited {
text-decoration: none;
color: blue;
cursor: pointer;
}
Here is a handy snippet if you want to copy-paste the accepted solution into React
const UnstyledLink = ({ href, children }) => (
<a
href={href}
style={{
textDecoration: "inherit",
color: "inherit",
cursor: "auto",
}}
>
{children}
</a>
);