This is kind of a complicated question. I have a site where I want to create icon links where the icons background changes when I mouse over the link element which is larger than that div. I also want to be able to align them to the top of the section if possible. Here is my public link so you can see it as I don’t think I can explain it.
I want it to look similar to the 3rd section of this site with the icons but obviously without the changing section above it. http://www.exacttarget.com
Is this possible using css to control the circle background of the icons or should I just use images for the entire icon?
Hi, I am not really sure what you are trying to accomplish by your description of the icons backgrounds, do you want just the background of the icon, or the background of the link block to change when hovered by mouse?
Regarding the alignment of icons, they are not aligned because you have some icons with two lines of text, and some icons with one line of text. You can fix this for the one line of text icons, by selecting one of the one line nav links, and add a new class and call it something like “single line” and then for that text, change the line height of the text from 20 to 60 an this will align the icon so that it is in line with the other icons.
For the icons, I basically want the background of the icon to change even if I am rolling over the text. So mousing over the block anywhere would trigger the background of the icon to change.
I tried changing the line height but it centers the text in the box and adds space to the top and bottom of the text block. I was able to get it to sit right by adding an empty text block below the single line block. I don’t know if this is good practice though and if anyone with advanced experience can chime in on the correct way to do this, it would be very helpful.