2 replies [Last post]
Vancouver.Tech....
Vancouver.Tech.Writer's picture
Offline
Regular
Last seen: 3 years 45 weeks ago
Timezone: GMT-7
Joined: 2014-03-17
Posts: 11
Points: 15

Our toolbar icons are icon+text with a background color.
See attachments.

Currently, I've implemented the whole thing (background+icon+text) as one image, so hover is easy: just swap in the hover image.

However, this means the text is fuzzy since it's been converted to image. I want to do proper implementation where the regular state is a colored block+icon+text. But I want the hover state to be the same as previous, that is, if you hover anywhere on the block, the block+icon+text all change color.

Can you help me write the CSS for changing the hover state for multiple elements on hover of one?

Also, should my colored block be a table cell?

Thanks!

AttachmentSize
Regular state1.06 KB
Hover state1.14 KB
Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 6 hours 23 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Hi

Hi Vancouver.Tech.Writer,
Just put the image and text within a link, you may want to float or display it block.
Then apply the hover effect to it.
The block doesn't need to be a table cell and really shouldn't be one.

Vancouver.Tech....
Vancouver.Tech.Writer's picture
Offline
Regular
Last seen: 3 years 45 weeks ago
Timezone: GMT-7
Joined: 2014-03-17
Posts: 11
Points: 15

You were right!

This worked fine:

<style>
    .toolbar {
         display:block; 
         width: 65px; 
         height:40px; 
         padding-top:3px; 
         vertical-align:middle; 
         text-align:center; 
         background-color:#A0A0A0; 
         color:#000;}
 
    a.toolbar {
         color:#000;}
 
    a.toolbar:hover {
         color: #000; 
         background-color:#D9D9D9; 
         text-decoration:none;}
</style>
 
 
<a href="#" class="toolbar"><img alt="" src="/Images/tb-messages.png" /><br />
Messages</a>