Grow your CSS skills. Land your dream job.

fancy link

  • # December 21, 2011 at 9:47 am

    Here is my problem / goal. I have table cell (the standard td). I can make it so when they hover of course, the color changes, which is what I want, but I also want to make it a link. Is this possible? The solution must work in IE8.

    I thought about just making anchors all the way across then using the table type in CSS but that does not work with IE8.

    Any ideas or insight you would be great.

    Thanks.

    # December 21, 2011 at 10:51 am

    Hi djpic,

    If I understand correctly, you want to make a table with anchor tags, and if you hover over your links, or over your td, the links change.

    All you need to do is use: “td:hover a{}”. You can see an example of this on the following link: http://jsfiddle.net/dmdjM/1/.

    # December 21, 2011 at 1:54 pm

    Miker is exactly right about how to get to the anchor to style it in CSS. But if you want the anchor to bleed to the edge of the parent table cell to give the effect that the entire cell is the “button” then you’re probably looking for something like this: http://jsfiddle.net/jstam/NfHRC/

    # December 21, 2011 at 2:13 pm

    Miker,

    That is what I was thinking of trying to do. But the opposite. When hovering over the cell, the link and cell are active. That was my first guess on how to get it to work but now I see with that how it should be defined.

    jstam,

    Perfect. That is exactly what I wanted and then some. I need the link to fill the table cell, so when you highlight the cell, it is also the link. I am going to give your solution and try and see how well it works with what I am trying to do.

    Thanks to both of you!

    I do have one question, what is the difference between a and a:link?

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".