I'm trying to style my links within a div which I've given the class .whatnextnav. The hover styling is working but not the link, it's still inheriting the color: #3CB6CE even thought Firebug says it's not.
Can anyone see a problem with the below?
.whatnextnav a:link, a:active, a:visited
{
color: #008566;
text-decoration: none;
}
.whatnextnav a:hover
{
color: #008566;
text-decoration: underline;
}
When multiple selectors share a single style, the full selector must be used for each selector. Make the class prefix each selector:
.whatnextnav a:link, .whatnextnav a:active, .whatnextnav a:visited
{
color: #008566;
text-decoration: none;
}
JS Fiddle: http://jsfiddle.net/9Kqv8/
Try changing it to:
.whatnextnav a, .whatnextnav a:active, .whatnextnav a:visited
{
color: #008566;
text-decoration: none;
}
.whatnextnav a:hover
{
color: #008566;
text-decoration: underline;
}
Related
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.
I have all links on my site underlined when hovered using the following css:
a:hover {
text-decoration: underline;
}
How can I make a class which will override this?
.footer {
text-decoration: none;
}
Your second selector is less accurate than the first one, therefore it's the first one that is applied.
Plus, you shouldn't target such a wide selector (.footer) in order to only style your links. What you should do is:
.footer a:hover{ text-decoration: none; }
(As I assume that default a state doesn't have a text-decoration: underline;)
This code seemed to fix it although it wasn't working earlier:
a:hover {
text-decoration: underline;
}
.footer a{
text-decoration:none;
}
I have a div in which I'd like to override my global link style. I have two link styles, one global, one specific. Here the code:
A:link {text-decoration: none; color: #FF0000;}
A:visited {text-decoration: none; color: #FF0000;}
A:hover {text-decoration: none; color: #FF0000;}
A:active {text-decoration: none; color: #FF0000;}
#macrosectiontext
{
position:relative;
font:Arial, sans-serif;
text-align:center;
font-size:50px;
font-style: bold;
margin-top:245px;
opacity: 0.6;
background-color:transparent;
}
#macrosectiontext A:link {text-decoration: none; color: #000000;}
#macrosectiontext A:visited {text-decoration: none; color: #FFFFFF;}
#macrosectiontext A:hover {text-decoration: none; color: #FFFFFF;}
#macrosectiontext A:active {text-decoration: none; color: #FFFFFF;}
and I use the div like this:
<div id="macrosectiontext">bla bla bla</div>
however it seems that it doesn't work. The div still inherits the global link style.
CSS work on inheritance, so you should only override the properties you want to change.
Try always to write HTML & CSS lowercase, still your HTML and CSS are correct
a:link,
a:visited,
a:hover,
a:active {
text-decoration: none;
color: #f00;
}
#macrosectiontext {
position: relative;
font:Arial, sans-serif;
text-align: center;
font-size: 50px;
font-style: bold;
margin-top: 245px;
opacity: 0.6;
background-color: transparent;
}
#macrosectiontext a:link {
color: #000;
}
#macrosectiontext a:visited,
#macrosectiontext a:hover,
#macrosectiontext a:active {
color: #fff;
}
I made a fiddle for you to show your code is working (changed the hover color, just for demo)
In The css I would not use the id "#macrosectiontext a:link..." for the link code I would use a class ".macrosectiontext"
use a lower case "a" instead of a Cap "A" in the link style
If you using the style only a few times you can use a span tag around the link and then call to your style from the span tag in stead of the div.
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;
}
I have the following in my css:
.categories-widget li a:hover {
text-decoration: underline;
}
.categories-widget li a:active {
text-decoration: underline;
}
and this in my sidebar.php:
<h2 class="big">Categories</h2>
<ul class="categories-widget">
<?php
global $parent_id;
wp_list_categories('show_count=1&title_li=&child_of='.$gateway_parent_id.'&show_count=0&hide_empty=0'); ?>
</ul>
The a:hover works, but not the a:active. Is there a reason for this? What can I do to fix it?
it wont work since you have:
.categories-widget li a:hover {
text-decoration: underline;
}
.categories-widget li a:active {
text-decoration: underline;
}
and the :active pseudo selector will match when an element is currently being pressed down on by the mouse cursor. so it is doing the same thing..
try :
.categories-widget li a:hover {
text-decoration: underline;
}
.categories-widget li a:active {
position:fixed;
padding-top:1px;
color:red;
}