So I have this bit of CSS to change a specific link on a page to a different color (the default link color is the same background color of where the text is sitting, making it invisible).
.scroll a:link {
text-decoration: underline;
color: #5a4a31;
}
.scroll a:hover {
text-decoration: underline;
color: #5a4a31;
}
.scroll a:visisted {
text-decoration: underline;
color: #5a4a31;
}
.scroll a:active {
text-decoration: underline;
color: #5a4a31;
}
Which works in every browser but Chrome ('hover' is the only part that actually works when viewing in Chrome, the rest just go to the default link styles I have set). Anyone know why? Thanks!!
If you're going style each state of the link, the order you should do this is LVHA (link, visited, hover, active). Also, you misspelled 'visited'.
.scroll a:link {
text-decoration: underline;
color: red;
}
.scroll a:visited {
text-decoration: underline;
color: green;
}
.scroll a:hover {
text-decoration: underline;
color: blue;
}
.scroll a:active {
text-decoration: underline;
color: orange;
}
You could refactor a little:
.scroll a {
text-decoration: underline;
}
.scroll a:link { /* color: blah; */ }
.scroll a:visited { /* color: blah; */ }
.scroll a:hover { /* color: blah; */ }
.scroll a:active { /* color: blah; */ }
http://codepen.io/antibland/pen/WwKzdN
You spelled visisted instead of visited.
if .scroll is the class of the link than their is no need to put
a:link... you can just put .scroll:link or .scroll:hover.
Related
I'm working on a project for school, and I wanted the three links I have to be set to the different colors I need. But when I call a class in my CSS file, I'm told:
Unknown property 'a'. Expected RBRACE at line 12, col 11.
How can I set different classes so that my different links are different colors? Below is my CSS code.
body {
background-color: white;
color: black;
src: url('PressStart2P-Regular.ttf') format('truetype');
font-family: Times;
}
.colorlink {
/* unvisited link */
a:link {
color: darkred;
text-decoration: underline;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: powderblue;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
}
you are using a inside .colorlink selector , so it saw it as a property not a selector , thus its Unknown , you cannot nest selectors in css
what you can do instead is use multiple selectors like this :
a.colorlink:link {
color: darkred;
text-decoration: underline;
}
/* visited link */
a.colorlink:visited {
color: green;
}
/* mouse over link */
a.colorlink:hover {
color: hotpink;
}
/* selected link */
a.colorlink:active {
color: powderblue;
}
a.colorlink:link {
text-decoration: none;
}
a.colorlink:visited {
text-decoration: none;
}
a.colorlink:hover {
text-decoration: underline;
}
a.colorlink:active {
text-decoration: underline;
}
to only remove a style
a {
color : inherit ;
text-decoration : none ;
}
The error appears because it is not possible to use nested styles in pure CSS. Thus CSS thinks you are trying to a CSS-Property to .colorlink. Use a preprocessor like SCSS for that.
Besides, I assume you are trying to achieve something similar like this:
body {
background-color: white;
color: black;
font-family: Times;
}
.link1 {
color: green;
}
.link2 {
color: red;
}
.link3 {
color: blue;
}
a:visited {
color: green;
text-decoration: none;
}
a:hover {
color: hotpink;
}
a:active {
color: powderblue;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
My Link
My Link
My Link
This is how it is currently:
/* OCSearch Texto */
.linksearch {
color: #fff;
margin-top: 1px;
margin-left: 20px;
font-size: 12px;
}
.linksearch a:link {
color:#d8d8d8;
}
.linksearch a:hover {
color:#fff;
}
.linksearch a:visited {
color:#d8d8d8;
}
When clicked out the color changes to #d8d8d8 but theres no more hover after that. Thanks.
Alternate your :hover and :visited declarations to solve this. Also, don't neglect the :focus pseudo for keyboard users. Especially if you are using a reset that removes the outline from focusable items.
/* OCSearch Texto */
.linksearch {
...
}
.linksearch a:visited {
color:#d8d8d8;
}
.linksearch a:hover, .linksearch a:focus {
color:#fff;
}
I'm trying to figure out how to change the hover color, but only when the text has a link
This is the css code, but it changes color with or without links
h1, h2, h3, h4 {
color:#3F3F3F;
}
h1:hover, h2:hover, h3:hover, h4:hover {
color:#000000;
}
This will depend on how you have structured the links.
There are two basic varieties.
a) Links inside headings. In which case:
a {
color: red;
text-decoration: none;
}
h1 a:hover {
color: blue;
}
<h1>Link Inside Heading</h1>
b) Headings inside links. In which event:
a {
color: red;
text-decoration: none;
border: 1px solid grey;
display: inline-block;
}
a:hover {
color: green;
}
/* or */
h1 {
background: #c0ffee;
}
a h1:hover {
color: pink;
}
<h1>Heading Inside Link</h1>
Sample:
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover {
color:grey;
}
The anwser you are looking for is simple:
h1 a:hover, h2 a:hover, ect {
color:#000000;
}
You stated that the header when hovered should change color, which is not what you want.
Now it says that a header which contains a link (a) should change color when it is hovered. ;)
I have two divs in a web page (say view_1 and view_2). I want the styles of the links in each div to be different. Let's say the styles of the links are as follows:
style of links in div view_1:
a:link {
color: #CB4C2F;
text-decoration: none;
}
a:visited {
color: #CB4C2F;
}
a:active,
a:hover {
color: #B60A00;
}
style of links in div view_2:
a:link {
color: #B5B5B5;
text-decoration: none;
}
a:visited {
color: #808080;
}
a:active,
a:hover {
color: #FFFFFF;
}
In the page, I want to specify only the div in use. I do not want to specify a style for the links; the links should adopt the styles from the div in which they exist. How may this be accomplished?
Add classes to your div's
View_1
.view_1 a:link {
color: #CB4C2F;
text-decoration: none;
}
.view_1 a:visited {
color: #CB4C2F;
}
.view_1 a:active,
.view_1 a:hover {
color: #B60A00;
}
View_2
.view_2 a:link {
color: #B5B5B5;
text-decoration: none;
}
.view_2 a:visited {
color: #808080;
}
.view_2 a:active,
.view_2 a:hover {
color: #FFFFFF;
}
Given the following html:
<span data-icon="✪"></span>A Link
Is it possible to change the text-decoration (to none) on hover? The color will change, the text-decoration will not.
CSS:
a { text-decoration: none; }
a:hover{ text-decoration: underline; }
a:hover [data-icon]:before{
/*Doesn't work*/
text-decoration: none;
/*Works*/
color: red;
}
jsfiddle
As I explained in this other answer, you can use display: inline-block to prevent text-decoration set to an ancestor from propagating to your element:
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a > [data-icon]:before {
display: inline-block; /* Avoid text-decoration propagation from `a` */
content: attr(data-icon);
}
a:hover > [data-icon]:before {
color: red;
}
<span data-icon="✪"></span>A Link
Make things easier and separate it out
http://jsfiddle.net/nyFxn/2/
<span data-icon="✪"></span><span class="text">A Link</span>
CSS
a:hover{ text-decoration: none; }
a:hover [data-icon] {
/*Works*/
color: red;
}
a:hover .text {
text-decoration: underline;
}
Using display: inline-block works in all browsers but IE. To get it to work in IE8+, add overflow:hidden to the pseudo element containing the icon.
If the underline still remains in IE, set line-height: 1 on the pseudo element, so in total you get
a [data-icon]:before {
display: inline-block;
overflow: hidden;
line-height: 1;
}