CSS Hover

**minority** · 08-22-2005, 06:18 AM

Ok i have created a css that is simple.

Simply when you hover over a link it changes the colour etc.

however my links are on a table with each row detailing the dept, type etc

i want it so when you hover over one of the links the rest of the row lights up as well is this possible on css or will javascript be needed?

**Fang** · 08-22-2005, 06:59 AM

Is this suitable:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>DOM rollover</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript">
<!--
function rollOver(obj) {
obj.className=(obj.className=="on")? "off" : "on";
}
onload=function() {
var aTR=document.getElementsByTagName('tr');
for (var i=0;i<aTR.length;i++) {
	aTR[i].className='off';
    if (aTR[i].addEventListener) { // Mozilla
    	aTR[i].addEventListener('mouseover', function() { rollOver(this); }, false);
    	aTR[i].addEventListener('mouseout', function() { rollOver(this); }, false);
        }
    else {
    	aTR[i].onmouseover=function() {rollOver(this);}
    	aTR[i].onmouseout=function() {rollOver(this);}
        }
    }
aTR=null;
}

//-->
</script>

<style type="text/css">
<!-- 
.off {background:#ccc; color:#00f;}
.on {background:#ff0; color:#f00;} 
-->
</style>

</head>
<body>
<table border="1" cellpadding="3" cellspacing="3" summary="">
<tbody>
<tr><td>x</td><td>xx</td><td>xxx</td></tr>
<tr><td>x</td><td>xx</td><td>xxx</td></tr>
</tbody>
</table>
</body>
</html>

**minority** · 08-22-2005, 07:46 AM

do i just put my links in normailly or do i need onchange() and something filled into there to get this to work?

This looks exactly what i need thanks

i gather it makes the whole <td> of a row light up which is good. thanks again.

**Fang** · 08-22-2005, 08:24 AM

It makes the TR contents change. You can add the links(anchor) in the normal way, noextra JavaScript needed.
You may need to change the values in the on/off classes to match the values in the anchor pseudo classes.

**Siddan** · 08-22-2005, 08:38 AM

Since this is a css section I thought to contribute this code

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>DOM rollover</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">


<style type="text/css">
<!-- 
A {
display:block; 
padding:20px 0; 
color:darkblue; 
text-decoration:none;}

A:hover {
color:lightblue; 
background:black; }

A.example1:hover {color:red; background:darkblue; font-size:large; font-weight:bold;}
A.example2:hover {color:orange;
text-decoration:underline overline}
span a
-->
</style>

</head>
<body>
<table border="1" cellpadding="0" cellspacing="0" summary="">
<tbody>
<tr>
<td width="150"><A href="#">Link1</A></td>
<td><A href="#">Link2</A></td>
<td><A href="#">Link3</A></td>
</tr>

<tr>
<td><A href="#" class="example1">Link4</A></td>
<td><A href="#" class="example2">Link5</A</td>
<td><A href="#">Link6</A></td>
</tr>
</tbody>
</table>
</body>
</html>

**Fang** · 08-22-2005, 09:26 AM

Siddan, the whole row should light up.

**minority** · 08-23-2005, 03:08 AM

ye sidden that what i have at the moment i want the whole relevent row to light up like the code fang gave me....

I placed it in css as i thought it could be done by css but obviously i'm stupid and needs to be done in javascript lol

Im a little slow at moment still getting over the shock of what i just blew £1300 on
nice little fast pc lol.
4000+
asus sli deluxe mobo
xfx 7800gtx
1gb corsair msn pro (With leds)
200gb seagate 7200.7

still need to buy my samsung spinpoint 10k hd to make the system a beast.

**minority** · 08-23-2005, 03:25 AM

ok i am really thick

but this is how i understood you.

Code:

                <table width ="100%" cellpadding="4" cellspacing="4" bgcolor="<%=trcolour%>">
                  <tr > 
				    <td width = "5%"> <div align="center"><a href="../viewTicket.asp?Ticket_ID=<%=rsncr("Report_ID")%>&Raised_By_ID=<%=rsncr("Raised_By_ID")%>&Raised_By=<%=rsncr("Raised_By")%>&Date_Open=<%=rsncr("Date_Open")%>&Source_ID=<%=rsncr("Source_ID")%>&Details=<%=rsncr("Details")%>&Descriptionncr=<%=rsncr("Descriptionncr")%>&Type_ID=<%=rsncr("Type_ID")%>&Raised_Against=<%=rsncr("Raised_Against")%>&Type_Name=<%=Type_Name%>&Dept_Name=<%=deptname%>&InvestStatus=<%=rsncr("InvestigatedStatus")%>&QAStatus=<%=rsncr("QAStatus")%>&ClosedStatus=<%=rsncr("ClosedStatus")%>&ReInvestigateStatus=<%=ReInvestigateStatus%>&DocLink=<%=rsncr("DocLink")%>" target="_self" border ="0" class="on" ><%=rsncr("Report_ID")%></a> 
                      </div></td>
                    <td width = "16%"> <div align="center"><a href="../viewTicket.asp?Ticket_ID=<%=rsncr("Report_ID")%>&Raised_By_ID=<%=rsncr("Raised_By_ID")%>&Raised_By=<%=rsncr("Raised_By")%>&Date_Open=<%=rsncr("Date_Open")%>&Source_ID=<%=rsncr("Source_ID")%>&Details=<%=rsncr("Details")%>&Descriptionncr=<%=rsncr("Descriptionncr")%>&Type_ID=<%=rsncr("Type_ID")%>&Raised_Against=<%=rsncr("Raised_Against")%>&Type_Name=<%=Type_Name%>&Dept_Name=<%=deptname%>&InvestStatus=<%=rsncr("InvestigatedStatus")%>&QAStatus=<%=rsncr("QAStatus")%>&ClosedStatus=<%=rsncr("ClosedStatus")%>&ReInvestigateStatus=<%=ReInvestigateStatus%>&DocLink=<%=rsncr("DocLink")%>" target="_self" border ="0" class="on" ><%=rsncr("Raised_By")%></a> 
                      </div></td>
                    <td width = "1%"></td>
                    <td width = "17%"><div align="center"> <div align="center"><a href="../viewTicket.asp?Ticket_ID=<%=rsncr("Report_ID")%>&Raised_By_ID=<%=rsncr("Raised_By_ID")%>&Raised_By=<%=rsncr("Raised_By")%>&Date_Open=<%=rsncr("Date_Open")%>&Source_ID=<%=rsncr("Source_ID")%>&Details=<%=rsncr("Details")%>&Descriptionncr=<%=rsncr("Descriptionncr")%>&Type_ID=<%=rsncr("Type_ID")%>&Raised_Against=<%=rsncr("Raised_Against")%>&Type_Name=<%=Type_Name%>&Dept_Name=<%=deptname%>&InvestStatus=<%=rsncr("InvestigatedStatus")%>&QAStatus=<%=rsncr("QAStatus")%>&ClosedStatus=<%=rsncr("ClosedStatus")%>&ReInvestigateStatus=<%=ReInvestigateStatus%>&DocLink=<%=rsncr("DocLink")%>" target="_self" border ="0" class="on"><%=rsncr("Date_Open")%> </a>
                      </div></td>
                    <td width = "1%"></td>
                    <td width = "20%"><div align="center"><div align="center"><a href="../viewTicket.asp?Ticket_ID=<%=rsncr("Report_ID")%>&Raised_By_ID=<%=rsncr("Raised_By_ID")%>&Raised_By=<%=rsncr("Raised_By")%>&Date_Open=<%=rsncr("Date_Open")%>&Source_ID=<%=rsncr("Source_ID")%>&Details=<%=rsncr("Details")%>&Descriptionncr=<%=rsncr("Descriptionncr")%>&Type_ID=<%=rsncr("Type_ID")%>&Raised_Against=<%=rsncr("Raised_Against")%>&Type_Name=<%=Type_Name%>&Dept_Name=<%=deptname%>&InvestStatus=<%=rsncr("InvestigatedStatus")%>&QAStatus=<%=rsncr("QAStatus")%>&ClosedStatus=<%=rsncr("ClosedStatus")%>&ReInvestigateStatus=<%=ReInvestigateStatus%>&DocLink=<%=rsncr("DocLink")%>" target="_self" border ="0" class="on"><%=Type_Name%></a>
                      </div></td>
                    <td width = "1%"></td>
                    <td width = "20%"><div align="center"><div align="center"><a href="../viewTicket.asp?Ticket_ID=<%=rsncr("Report_ID")%>&Raised_By_ID=<%=rsncr("Raised_By_ID")%>&Raised_By=<%=rsncr("Raised_By")%>&Date_Open=<%=rsncr("Date_Open")%>&Source_ID=<%=rsncr("Source_ID")%>&Details=<%=rsncr("Details")%>&Descriptionncr=<%=rsncr("Descriptionncr")%>&Type_ID=<%=rsncr("Type_ID")%>&Raised_Against=<%=rsncr("Raised_Against")%>&Type_Name=<%=Type_Name%>&Dept_Name=<%=deptname%>&InvestStatus=<%=rsncr("InvestigatedStatus")%>&QAStatus=<%=rsncr("QAStatus")%>&ClosedStatus=<%=rsncr("ClosedStatus")%>&ReInvestigateStatus=<%=ReInvestigateStatus%>&DocLink=<%=rsncr("DocLink")%>" target="_self" border ="0" class="on"><%=deptname%></a></div></td>
                    <td width = "1%"></td>
                    <td width = "20%"><div align="center"><div align="center"><a href="../viewTicket.asp?Ticket_ID=<%=rsncr("Report_ID")%>&Raised_By_ID=<%=rsncr("Raised_By_ID")%>&Raised_By=<%=rsncr("Raised_By")%>&Date_Open=<%=rsncr("Date_Open")%>&Source_ID=<%=rsncr("Source_ID")%>&Details=<%=rsncr("Details")%>&Descriptionncr=<%=rsncr("Descriptionncr")%>&Type_ID=<%=rsncr("Type_ID")%>&Raised_Against=<%=rsncr("Raised_Against")%>&Type_Name=<%=Type_Name%>&Dept_Name=<%=deptname%>&InvestStatus=<%=rsncr("InvestigatedStatus")%>&QAStatus=<%=rsncr("QAStatus")%>&ClosedStatus=<%=rsncr("ClosedStatus")%>&ReInvestigateStatus=<%=ReInvestigateStatus%>&DocLink=<%=rsncr("DocLink")%>" target="_self" border ="0" class="on"><%=Ticket_Status%></a></div></td>
                  </tr>
                </table>

does that look correct? it is coming up on.a so its finding the class but it is not doing the whole row??

**Fang** · 08-23-2005, 05:31 AM

If you mean the code I gave, there's no need to add the class, it's all done with JavaScript and css.

**Siddan** · 08-23-2005, 05:32 AM

aoooooo, dont know how I missed that. Must´ve been tired.
Then I may apologize with this version then...

This goes into the header

</style>
<script LANGUAGE="JavaScript">
function TrowOn(src,OnColor){src.style.cursor = 'hand'; src.bgColor = OnColor;}
function TrowOff(src,OffColor){src.style.cursor = 'default'; src.bgColor = OffColor;}
</script>

and then you style the row
<tr style="cursor:hand" onMouseOver="TrowOn(this,'#FFF00');" onMouseOut="TrowOff(this,'');">

**Fang** · 08-23-2005, 05:36 AM

cursor: hand is IE only use cursor: pointer

**minority** · 08-23-2005, 07:41 AM

thanks to both of you....

didnt understand what i was suppose to do when it came to the rollovers and stuff got it working now thanks a whole lot ....

great

**minority** · 08-23-2005, 07:55 AM

just one last question is it possible to make the whole row one large link instead of single links around the text i tried placing it around the table but that didnt do it

**Fang** · 08-23-2005, 09:17 AM

Not the row, but each cell can be made a link:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>DOM rollover</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript">
<!--
function rollOver(obj) {
obj.className=(obj.className=="on")? "off" : "on";
}

function cellAnchor(obj) {
location.href=obj.parentNode.getElementsByTagName('a')[0].href;
}

onload=function() {
var aTR=document.getElementsByTagName('tr');
for (var i=0;i<aTR.length;i++) {
	aTR[i].className='off';
    var aTD=aTR[i].getElementsByTagName('td');
    if (aTR[i].addEventListener) { // Mozilla
    	aTR[i].addEventListener('mouseover', function() { rollOver(this); }, false);
    	aTR[i].addEventListener('mouseout', function() { rollOver(this); }, false);
        for(var c=0; c<aTD.length; c++) {
            aTR[i].getElementsByTagName('td')[c].addEventListener('click', function() {cellAnchor(this);}, false);
            }
        }
    else {
    	aTR[i].onmouseover=function() {rollOver(this);}
    	aTR[i].onmouseout=function() {rollOver(this);}
        var aTD=aTR[i].getElementsByTagName('td');
        for(var c=0; c<aTD.length; c++) {
        	aTR[i].getElementsByTagName('td')[c].onclick=function() {cellAnchor(this);}
            }
        }
    }
aTR=null;
}
//-->
</script>

<style type="text/css">
<!-- 
.off {background:#ccc; color:#00f;}
.on {background:#ff0; color:#f00;cursor:pointer;} 
-->
</style>

</head>
<body>
<table border="1" cellpadding="3" cellspacing="3" summary="">
<tbody>
<tr><td><a href="http://www.w3c.org">W3C</a></td><td>xx</td><td>xxx</td></tr>
<tr><td><a href="http://www.w3schools.com/default.asp">W3Schools</a></td><td>xx</td><td>xxx</td></tr>
</tbody>
</table>
</body>
</html>

Thread: CSS Hover

Thread Tools

Display

CSS Hover

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions