style css working but link css not

Question

Is there a reason my below CSS only half works?

div.share
{
 position:relative;
 top: -4px;
 left: 25px;
 font-family:Tahoma;
 background-color:#000000;
 font-size:11px;
 font-weight:bold;
}
/* share link css */
a.share:active
{
 color: #000000;

}
a.share:hover
{
 color: #FFFFFF;
 background-color:#000000;
 text-decoration: none;
}

The div.share CSS is all working but the CSS for the active and hover is not

Answer 1

adding your html would make this easier.

I can only guess that you have a <div> with class='share' and no <a> tag with the same.

e.g., does your html look like:

 <div class='share'>
   <a class='share' href='http://yoursite.com'&gt;Your site</a>
 </div>

or

 <div class='share'>
 </div>
 ...
 <a class='share' href='http://yoursite.com'&gt;Your site</a>

If it's the first, then

div.share a:hover {
  ...
}

would make more sense.

If it's the second, then the selector looks fine... though it might be better to choose different, but appropriate class names.

Answer 2

Can you show us an HTML snippet using this CSS? Is it really the <a> tag that has the share class or is it nested inside the <div class="share">?

Answer 3

Use div.share a:active and div.share a:hover.

The way you have it right now it is looking for an <a> tag with a share class applied directly. However the share class is on the outer div.

Answer 4

CSS is valid, but make sure the link does have the "share" class, if its in the DIV, change the css to:

div.share a:active
{
        color: #000000;

}
div.share a:hover
{
        color: #FFFFFF;
        background-color:#000000;
        text-decoration: none;
}