# Span class, add a:hover



## alexondrums (Apr 1, 2007)

In the footer of my website, I have two links. 

There is a small image to the left of each link, and I wanted the text to display slightly closer and vertically centred relative to the image.

As this is the only place on the website this occurs, I added a class in the CSS, and wrapped the HTML in <span class> tags.

It works great, however I want to change the link colour when hovered. 

I tried to work out how to do this, either adding the a:hover to the CSS class somewhere, or creating a new class....

Either way everything I've tried doesn't work.

I'd appreciate some guidance – please bear in mind I'm quite new to XHTML/CSS, although I have a solid understanding of HTML.

*CSS*


```
.rsstext

**      color:#7d9284;
        position:relative;
        left:-2px;
        top:-3px;
}
```
*XHTML*


```
<span class="rsstext"><a href="www.website.com">Some text here</a></span>
```


----------



## dm01 (Oct 10, 2006)

You must change all three of the link objects to change one. This is just how CSS works.


```
a:link{color: #654321}
a:hover{color: #000000}
a:visited{color: #123456}
```
_The colours listed above are for display purposes only. They are not meant to show colours that you should use, or would even be able to use._


----------



## alexondrums (Apr 1, 2007)

dm01 said:


> You must change all three of the link objects to change one. This is just how CSS works.
> 
> 
> ```
> ...


Many thanks

So how would I apply this to just my class span? (without effecting a elements for the rest of the website)


----------



## dm01 (Oct 10, 2006)

```
.rsstext

**      color:#7d9284;
        position:relative;
        left:-2px;
        top:-3px;
        
        a:link color: #654321
        a:hover color: #000000
        a:visited color: #123456
}
```
Just like that. I don't know if you have to have the color property in there, but browsers generally don't like empty CSS blocks. If you do need it, just set the attribute to what the others are, and no change will be apparent to the viewer.

The ** above represents the left brace (Shift+[ on English North American keyboards). The replacement is meant to combat some sort of attack.

_I haven't tried to change the <a> element in this way for a while; please post back if it doesn't work and I'll see if I can root out the problem. I believe what I have posted above to be the correct syntax, but I can't be completely sure. Worst case scenario is you don't get the pretty colours you want. Post back if it works too. _


----------

