One cell in whole table must change colour when rolled over

I have a cell in a table row that has a word in it and when you rollover the cell it changes colour. However, it only turns into the hand icon for the hyperlink when rolling over the actual word. I want the hyperlink to be active even when you just have the mouse over the actual cell.

I just gave this css property to the cell:

.row :hover {
	background-color: #D81920;
 } 

Open in new window

jonofatAsked:
Who is Participating?
 
Greg AlexanderLead DeveloperCommented:
Try this

.row :hover {
        background-color: #D81920;
	cursor:pointer;
 }

Open in new window

0
 
jonofatAuthor Commented:
Cool. That worked to show the hand icon over the entire cell, but if you click it doesn't do anything. It only goes to where it should if you click on the actual word link. It needs to go even when clicking on the cell so I need href on the actual cell somehow?
0
 
Greg AlexanderLead DeveloperCommented:
You could also add an onclick to the td

<tr onclick="window.location='you_url_here'">
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
jonofatAuthor Commented:
Hmm. I tried it now it doesn't change colour or even show the hand icon..

<td onclick="window.location='test.php'" width="34%" align="left" bgcolor="#666666" class="row">&nbsp;CHANGE E-MAIL/PASSWORD</td>

Open in new window

0
 
Greg AlexanderLead DeveloperCommented:
Try this:

<td width="34%" align="left" bgcolor="#666666" class="row"><div onclick="window.location='test.php'">&nbsp;CHANGE E-MAIL/PASSWORD</div></td>

Open in new window

0
 
Greg AlexanderLead DeveloperCommented:
In addition to the to show the hand I have above
0
 
jonofatAuthor Commented:
Cool. It is nearly perfect. When I rollover, there is a border that is the wrong colour that goes around the cell? Why does this have to been in a div?
0
 
Greg AlexanderLead DeveloperCommented:
you can try it in a span instead of a div, you may have another rule that applies to divs..
0
 
jonofatAuthor Commented:
are you saying another rule applying to divs is giving me the border when I rollover?
0
 
Greg AlexanderLead DeveloperCommented:
I believe that to be true
0
 
jonofatAuthor Commented:
How would I do it as span?
0
 
Greg AlexanderLead DeveloperCommented:
<td width="34%" align="left" bgcolor="#666666" class="row"><span onclick="window.location='test.php'">&nbsp;CHANGE E-MAIL/PASSWORD</span></td>

Open in new window

0
 
jonofatAuthor Commented:
Damn, that only changes the cell colour when you rollover the actual word :(
0
 
Greg AlexanderLead DeveloperCommented:
OK, there are a thousand ways to skin a cat lol... try this

<td width="34%" align="left" bgcolor="#666666" class="row">
	<a href="whatever.htm" style="display:block;width:100%;height:100%;text-decoration:none;">&nbsp;CHANGE E-MAIL/PASSWORD</a>
    </td>

Open in new window

0
 
Greg AlexanderLead DeveloperCommented:
I would add that to your a class is you have one, just to clean it up some

.row a{
     display:block;width:100%;
     height:100%;
     text-decoration:none;
}

<td width="34%" align="left" bgcolor="#666666" class="row">
        <a href="whatever.htm">&nbsp;CHANGE E-MAIL/PASSWORD</a>
    </td>

Open in new window

0
 
jonofatAuthor Commented:
Hmm. That works but the border is still there. I did however figure out why the border is there. I have a cell padding of 2 on the table. If I make that zero the border goes away but now my table is too squashed...
0
 
Greg AlexanderLead DeveloperCommented:
You could take the table padding off and just add it to the a tag

.row a{
     display:block;width:100%;
     height:100%;
     text-decoration:none;
    padding:2px;
}

<td width="34%" align="left" bgcolor="#666666" class="row">
        <a href="whatever.htm">&nbsp;CHANGE E-MAIL/PASSWORD</a>
    </td>

Open in new window

0
 
jonofatAuthor Commented:
Now it doesn't change colour on rollover....
0
 
jonofatAuthor Commented:
Okay, I found out a wonderful, easy way to do this. I am going to give you some points for your help and myself since I found the answer :O

<td width="34%" align="left" bgcolor="#666666" onclick="window.location='edit_details.php'" onmouseover="this.style.background='#D71820';this.style.cursor='pointer'"
onmouseout="this.style.background='#666666';"><span class="headingtext">&nbsp;EDIT EMAIL/PASSWORD</span>

Open in new window

0
 
Greg AlexanderLead DeveloperCommented:
Ahhh.. like I say there is so many ways... glad you found the one that works :)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.