Jump to content

Fairly Simple Question About Hover...


darossa
 Share

Recommended Posts

HiThis is my simple, but loved website: http://notasdeaula.orgIn there, you can see that everthing is based on tables. On the header, we can see some links, such as the "ajuda", "segundo semestre", and so on. Also, in the main table, the one with five colums, we see more links over text inside the cells.What I would like to do, but doesn't know the best way to do without going to javascript and extra files (I really want it to be all in html or CSS), is to make the whole cells clickable, but adding a hover property. Also, on hover, i`d like to have it change colors, so that the users will know that`s clickable more quickly. for example, the first row of the main cell contains links too, with important content, but they confuse it by thinking it`s just the column title.What do you suggest?Thanks a lot.

Link to comment
Share on other sites

I didn't get how this helps. This is not about spacing or padding... just about linking and making the cells change appearance when hovered... or am I mistaken (very possible).
The idea is to first make the link take the full space of the table cell, and then just change the style of the link instead.Here's a quick example:
<table class="box">...<td><a href="">A link</a></td>...</table>

table.box a { display: block; }table.box a:hover { background-color: red; }

Link to comment
Share on other sites

I didn't get how this helps. This is not about spacing or padding... just about linking and making the cells change appearance when hovered... or am I mistaken (very possible).
What Ingolme said. Instead you use the content within cell to determine the cells size (like an image, maybe? (or with padding/display), and then use that content as your anchor.
Link to comment
Share on other sites

Thanks guys and sorry for late response.So, I get almost all of it, and created this sample: http://notasdeaula.org/hoverbox.htmlBut, as you can see, only the background of the link text is coloured when hovered, not the entire table cell. How to change that? :)
Remove any padding from the table cell, and apply it to the <a> element instead. That also means to set the cellpadding attribute to 0.Also, table cells expand to be equal to the height of the tallest table cell, I think adding min-height: 100% should solve it. Edited by Ingolme
Link to comment
Share on other sites

Remove any padding from the table cell, and apply it to the <a> element instead. That also means to set the cellpadding attribute to 0.Also, table cells expand to be equal to the height of the tallest table cell, I think adding min-height: 100% should solve it.
There is already no padding in the cells as far as I know. The space between the top and text of the cell with large amount of text in it is because of the own amount of text compared to the amount of text of the adjacent cell.
and apply it to the <a> element instead
it what? :) Sorry for not undestanding... I created the codes you told me in post #6... what next? Thanks. Edited by Da Rossa
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...