www.webdeveloper.com
Results 1 to 14 of 14

Thread: CSS Hover

  1. #1
    Join Date
    Jun 2005
    Posts
    178

    CSS Hover

    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?
    NEW RIG

    Asus deluxe sli mobo
    4000+ amd 64 (clocked at 2.6)
    1gb corsair xms pro
    200gb seagate
    xfx 7800gtx
    windows 64 (quick fix on driver pm for how)

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    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>
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    Jun 2005
    Posts
    178
    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.
    NEW RIG

    Asus deluxe sli mobo
    4000+ amd 64 (clocked at 2.6)
    1gb corsair xms pro
    200gb seagate
    xfx 7800gtx
    windows 64 (quick fix on driver pm for how)

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    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.
    At least 98% of internet users' DNA is identical to that of chimpanzees

  5. #5
    Join Date
    Jan 2004
    Location
    Sweden
    Posts
    850
    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>

  6. #6
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Siddan, the whole row should light up.
    At least 98% of internet users' DNA is identical to that of chimpanzees

  7. #7
    Join Date
    Jun 2005
    Posts
    178
    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.
    NEW RIG

    Asus deluxe sli mobo
    4000+ amd 64 (clocked at 2.6)
    1gb corsair xms pro
    200gb seagate
    xfx 7800gtx
    windows 64 (quick fix on driver pm for how)

  8. #8
    Join Date
    Jun 2005
    Posts
    178
    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??
    NEW RIG

    Asus deluxe sli mobo
    4000+ amd 64 (clocked at 2.6)
    1gb corsair xms pro
    200gb seagate
    xfx 7800gtx
    windows 64 (quick fix on driver pm for how)

  9. #9
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    If you mean the code I gave, there's no need to add the class, it's all done with JavaScript and css.
    At least 98% of internet users' DNA is identical to that of chimpanzees

  10. #10
    Join Date
    Jan 2004
    Location
    Sweden
    Posts
    850
    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,'');">

  11. #11
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    cursor: hand is IE only use cursor: pointer
    At least 98% of internet users' DNA is identical to that of chimpanzees

  12. #12
    Join Date
    Jun 2005
    Posts
    178
    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
    NEW RIG

    Asus deluxe sli mobo
    4000+ amd 64 (clocked at 2.6)
    1gb corsair xms pro
    200gb seagate
    xfx 7800gtx
    windows 64 (quick fix on driver pm for how)

  13. #13
    Join Date
    Jun 2005
    Posts
    178
    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
    NEW RIG

    Asus deluxe sli mobo
    4000+ amd 64 (clocked at 2.6)
    1gb corsair xms pro
    200gb seagate
    xfx 7800gtx
    windows 64 (quick fix on driver pm for how)

  14. #14
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    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>
    At least 98% of internet users' DNA is identical to that of chimpanzees

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles