Wed, 2015-02-25 21:58
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!
| Attachment | Size |
|---|---|
| Regular state | 1.06 KB |
| Hover state | 1.14 KB |
Thu, 2015-02-26 03:09
#1
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.
Thu, 2015-03-05 22:38
#2
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>