?
Solved

One cell in whole table must change colour when rolled over

Posted on 2011-05-01
20
Medium Priority
?
208 Views
Last Modified: 2012-08-13
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

0
Comment
Question by:jonofat
  • 11
  • 9
20 Comments
 
LVL 19

Accepted Solution

by:
Greg Alexander earned 2000 total points
ID: 35500967
Try this

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

Open in new window

0
 

Author Comment

by:jonofat
ID: 35500985
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
 
LVL 19

Expert Comment

by:Greg Alexander
ID: 35500986
You could also add an onclick to the td

<tr onclick="window.location='you_url_here'">
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

Author Comment

by:jonofat
ID: 35501003
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
 
LVL 19

Expert Comment

by:Greg Alexander
ID: 35501011
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
 
LVL 19

Assisted Solution

by:Greg Alexander
Greg Alexander earned 2000 total points
ID: 35501013
In addition to the to show the hand I have above
0
 

Author Comment

by:jonofat
ID: 35501020
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
 
LVL 19

Expert Comment

by:Greg Alexander
ID: 35501024
you can try it in a span instead of a div, you may have another rule that applies to divs..
0
 

Author Comment

by:jonofat
ID: 35501033
are you saying another rule applying to divs is giving me the border when I rollover?
0
 
LVL 19

Expert Comment

by:Greg Alexander
ID: 35501034
I believe that to be true
0
 

Author Comment

by:jonofat
ID: 35501035
How would I do it as span?
0
 
LVL 19

Expert Comment

by:Greg Alexander
ID: 35501040
<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
 

Author Comment

by:jonofat
ID: 35501047
Damn, that only changes the cell colour when you rollover the actual word :(
0
 
LVL 19

Expert Comment

by:Greg Alexander
ID: 35501064
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
 
LVL 19

Expert Comment

by:Greg Alexander
ID: 35501070
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
 

Author Comment

by:jonofat
ID: 35501072
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
 
LVL 19

Expert Comment

by:Greg Alexander
ID: 35501083
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
 

Author Comment

by:jonofat
ID: 35501199
Now it doesn't change colour on rollover....
0
 

Author Comment

by:jonofat
ID: 35501385
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
 
LVL 19

Expert Comment

by:Greg Alexander
ID: 35504211
Ahhh.. like I say there is so many ways... glad you found the one that works :)
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
Suggested Courses
Course of the Month17 days, 5 hours left to enroll

862 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question