Clever Geek Handbook

The css style works, but the css link is not

Is there a reason why my bottom CSS is only half working?

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

CSS div.share

works, but CSS for active

and hover

doesn't

+2


source to share


4 answers


CSS is valid, but make sure the link is of class "share", if it is in DIV change css to:



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

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


source


Adding your html will make this easier.

I can only assume you have a tag <div>

with a tag class='share'

and no <a>

with the same.

For example, 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 this is the first, then

div.share a:hover {
  ...
}

will make more sense.

If it's the second then the selector looks great ... although it's better to choose different but appropriate class names.

+2


source


Use div.share a:active

and div.share a:hover

.

The way you have it right now, it looks for the <a> tag using the share class. However, the share class is on the outer div.

+2


source


Can you show us a piece of HTML using this CSS? Is it really a tag <a>

that has a class share

or is it nested inside <div class="share">

?

+1


source






More articles:


All Articles