By juc1 on

Hi all,

I want to get the hover effect something like the attached screenshot (from http://www.dailymail.co.uk, right sidebar).

I have tried to follow the instuctions here...

http://drupal.org/node/773192#comment-3933172

...but so far as you can see on my views table here http://treefish.co.uk/daily-mail only the text is responding to the hover rather than the entire cell or row.

Any suggestions please?

Thank you

My CSS:

.views-table tbody td {
border:5px solid pink;
}

.views-table tbody td a { 
display: block; 
width: 100%; 
height: 100%; 
}

.views-table tbody td a:hover { 
display: block; 
width: 100%; 
height: 100%; 
}

tr:hover { 
background-color: yellow; 
}

tr a:hover { 
background-color: green; 
}
⋅ Categories: Drupal 6.x

Comments

juc1’s picture

juc1 commented

screenshot here
http://imgur.com/ZpdZS

alanpeart’s picture

alanpeart commented

Hi, it took me a little while to work it out, but it seems you have to explicitly give your cells a height, otherwise the link doesn't know how high it has to be. Try 

.views-table tbody td {
border:5px solid pink;
height: 113px;
}

see if that works for you, it did for me on your test page.

Technical Director at The Creative Coop

http://www.creative.coop

alanpeart’s picture

alanpeart commented

Sorry for spamming you :-) I wanted to see if I could achieve vertical centering for your text within the cell, since that would be much nicer, and I hit on an alternative way of doing it. Instead of assigning a fixed height to the cell, you can use display: table-cell on the link and apply the fixed height to it, like so: 

 .views-table tbody td a {
display: table-cell;
width: 100%;
height: 113px;
vertical-align: middle;
}

Technical Director at The Creative Coop

http://www.creative.coop

alanpeart’s picture

alanpeart commented

Also, if you want the cell to highlight when anywhere in the row is hovered, not just that cell, then you need to apply your hover effect to the row element rather than the cell.

Technical Director at The Creative Coop

http://www.creative.coop

juc1’s picture

juc1 commented

@ Alan, awesome thank you and please keep spamming me :)

Just to stick with your first reply for a minute, I have...

.views-table tbody td {
border:5px solid pink;
height: 113px;
} 

.views-table tbody tr {
border:5px solid red;
height: 113px;
}  

td a:hover { 
background-color: green; 
}

tr a:hover { 
background-color: blue; 
}

I think 'tr' = table row, and 'td' = table data (cell) so why is only the cell and not the row turning blue on hover?

Thank you :)