I’m trying to use a hover effect on a one-button nav bar using the navigation matrix method, and I’m having trouble.
My <div> container for the button is absolutely positioned, and I simply want the button to be a link that changes states on :hover from the top section to the bottom of my background-image (image attached). I’ve done this for entire navigation menus using a <ul>, but never on a single, absolutely positioned <div>. This seems like it should be much simpler, but I can’t seem to figure it out. Can anyone slap me into shape?
Well, <a> is an inline element. So, by default, the :hover effect (and therefore the background image change) is only going to apply to the exact area that the "Get Serious" text occupies. But you have the font-size set to 1%, which for me (in Firefox) makes it so small that I can’t see it. I’m guessing that you don’t want the text visible at all, and that’s why you did it that way, but this has the side effect of shrinking the :hover area with it.
Here’s how to fix it. First, you can get rid of the container and span, and apply the positioning stuff directly to the link (you only have one link, so there’s no point in having a container). Second, give the link a width and a height, and set its display to "block". Then you can remove the "Get Serious" text entirely, and just leave an empty link. The link will occupy the dimensions you specify (82 x 109), and the :hover will then apply to that whole area.