CODEWITHSUNDEEP
css
ian
ian

Reputation: 12345

style css working but link css not

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

Upvotes: 2

Views: 2007

Answers (4)

eozzy
eozzy

Reputation: 68760

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;
}

Upvotes: 3

Michael Gattuso
Michael Gattuso

Reputation: 13210

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.

Upvotes: 2

Konrad Rudolph
Konrad Rudolph

Reputation: 546083

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">?

Upvotes: 1

Jonathan Fingland
Jonathan Fingland

Reputation: 57197

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'>Your site</a>
 </div>

or

 <div class='share'>
 </div>
 ...
 <a class='share' href='http://yoursite.com'>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.

Upvotes: 2

Related Questions