Hover Styles in OOB SharePoint

Okay, this is going to sound really pedantic, but this is really annoying me. In default SharePoint there are a number of buttons. These buttons have text on them. When you roll you mouse over the button, the background and text changes colour. However, as the text does not have the same area as the whole button, the regions in which the hover occurs are different. For example, see the image below…

So, as you can see, the button turns oranges, and then the link turns black.

Now, this isn’t a problem in the default styles – the change from blue to black is very small. But you can’t guarantee that this is the case for rebranded sites – and of course, in mine it was a big difference.

And the crazy thing is, well, the button area’s style is being changed by JavaScript – that’s what makes it turn orange. So you can just use that style change to change the colour of the link text. Why define an hover pseudoclass for it?

Anyway, that’s what I did while tidying up my design.

Hover Styles in OOB SharePoint

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.