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;
}
Related
I am working on a site
dev.pfp-consortium.org
For the footer menu I have an id footermenu. I thought I could do the following to style it, but it is not working:
#footermenu ul li a{
color: #b3d1ff;
}
#footermenu ul li a:hover{
color: #ffffff;
}
Any ideas? I am fairly new to CSS and all these inheritance relationships get confusing, as well as syntax. Thanks!
Try this way :
#footermenu li a{ color: #b3d1ff; }
OR
ul#footermenu li a{ color: #b3d1ff; }
footermenu is the id to the ul so #footermenu ul means you want a ul inside a container with id footermenu
Use this
ul#footermenu li a{
color: #b3d1ff;
}
ul#footermenu li a:hover{
color: #ffffff;
}
try this.,
ul#footermenu li a{
color: #b3d1ff;
}
ul#footermenu li a:hover{
color: #ffffff;
}
If you want the new style over the old inherited you should set !important like:
color: #ffffff !important;
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'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;
}
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 existing CSS as
a:active {
outline: none;
}
a:focus {
-moz-outline-style: none;
}
which works fine
i want to restrict the application only to those anchor items which are part of an <ul><li> item under a div with class="tabs_container"
so this is what i did only to fail !
#tabs_container ul li a:active {
outline: none;
}
#tabs_container ul li a:focus {
-moz-outline-style: none;
}
am i doing it wrong ?
thanks in advance
EDIT
My bad ! actually the ID="tabs_container" not Class.
Further reference : This is part of the tutorial about How to create Tabs using Jquery from Scratch by Erric Berry.
Your element has a class but you are trying to reference it with an ID
.tabs_container ul li a:active {
outline: none;
}
.tabs_container ul li a:focus {
-moz-outline-style: none;
}
Try:-
ul > li > a:active
This should catch anchors which are a child of <li> elements which in turn are children of <ul> elements.
CSS classes are prefixed with a . (dot).
So, try
.tabs_container ul li a:active {
outline: none;
}
.tabs_container ul li a:focus {
-moz-outline-style: none;
}