Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Sep 2010
    Posts
    67
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Can't understand why it won't work?

    Have created a Football league table and would like each line to be highlighted when the browser is moved over them. I have been using:

    Code:
    <tr class="box">
               +
    tr.box:hover {
         background: #c0c0c0;
    }

    Code:
    <!doctype html>
    <html lang="en">
    <head>
          <meta charset="utf-8">
          <title>Championship League Table</title>
          <link rel="stylesheet" href="champ_styles.css">
    </head>
    
    <body>
    
    <table style="width: 535px">
    
    <caption><h1>Champ League Table</h1></caption>
    
    <thead>
       <tr>
          <th style="width:30px">Pos</th><th style="width:200px">Teams</th>
          <th style="width:30px">Pld</th><th style="width:30px">W</th>
          <th style="width:30px">D</th><th style="width:30px">L</th>
          <th style="width:30px">F</th><th style="width:30px">A</th>
          <th style="width:35px">Gd</th>
          <th style="width:35px">Pts</th>
       </tr>
    </thead>
    
    <tbody>
    
       <tr class="box">
          <td>00</td><td style="text-align:left; padding-left:10px; font-weight:bold">Blackburn</td>
          <td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td>
       </tr>
    
       <tr class="box">
          <td>00</td><td style="text-align:left; padding-left:10px; font-weight:bold">Blackpool</td>
          <td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td>
       </tr>
    
       <tr>
       <td colspan="10">
       <hr style="width:100%">
       </td>
       </tr>
    
       <tr class="box">
          <td>00</td><td style="text-align:left; padding-left:10px; font-weight:bold">Birmingham</td>
          <td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td>
       </tr>
    
       <tr class="box">
          <td>00</td><td style="text-align:left; padding-left:10px; font-weight:bold">Bolton</td>
          <td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td>
       </tr>
    
       <tr class="box">
          <td>00</td><td style="text-align:left; padding-left:10px; font-weight:bold">Bournemouth</td>
          <td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td>
       </tr>
    
       <tr class="box">
          <td>00</td><td style="text-align:left; padding-left:10px; font-weight:bold">Brentford</td>
          <td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td>
       </tr>
    
       <tr>
       <td colspan="10"> 
       <hr style="width:100%">
       </td>
       </tr>
    
       <tr class="box">
          <td>00</td><td style="text-align:left; padding-left:10px; font-weight:bold">Brighton</td>
          <td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td>
       </tr>
    
       <tr class="box">
          <td>00</td><td style="text-align:left; padding-left:10px; font-weight:bold">Cardiff City</td>
          <td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td>
       </tr>
    
       <tr class="box">
          <td>00</td><td style="text-align:left; padding-left:10px; font-weight:bold">Charlton</td>
          <td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td>
       </tr>
    
       <tr class="box">
          <td>00</td><td style="text-align:left; padding-left:10px; font-weight:bold">Derby</td>
          <td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td>
       </tr>
    
       <tr class="box">
          <td>00</td><td style="text-align:left; padding-left:10px; font-weight:bold">Fulham</td>
          <td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td>
       </tr>
    
       <tr class="box">
          <td>00</td><td style="text-align:left; padding-left:10px; font-weight:bold">Huddersfield</td>
          <td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td>
       </tr>
    
       <tr class="box">
          <td>00</td><td style="text-align:left; padding-left:10px; font-weight:bold">Ipswich</td>
          <td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td>
       </tr>
    
       <tr class="box">
          <td>00</td><td style="text-align:left; padding-left:10px; font-weight:bold">Leeds Utd</td>
          <td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00
    </td>
       </tr>
    
       <tr class="box">
          <td>00</td><td style="text-align:left; padding-left:10px; font-weight:bold">Middlesbrough</td>
          <td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td>
       </tr>
    
       <tr class="box">
          <td>00</td><td style="text-align:left; padding-left:10px; font-weight:bold">Millwall</td>
          <td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td>
       </tr>
    
       <tr class="box">
          <td>00</td><td style="text-align:left; padding-left:10px; font-weight:bold">Norwich</td>
          <td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td>
       </tr>
    
       <tr class="box">
          <td>00</td><td style="text-align:left; padding-left:10px; font-weight:bold">Nottm Forest</td>
          <td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td>
       </tr>
    
       <tr class="box">
          <td>00</td><td style="text-align:left; padding-left:10px; font-weight:bold">Reading</td>
          <td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td>
       </tr> 
    
       <tr class="box">
          <td>00</td><td style="text-align:left; padding-left:10px; font-weight:bold">Rotherham</td>
          <td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td>
       </tr>
    
       <tr class="box">
          <td>00</td><td style="text-align:left; padding-left:10px; font-weight:bold">Sheff Wed</td>
          <td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td>
       </tr>
    
       <tr>
       <td colspan="10">
       <hr style="width:100%; color:red">
       </td>
       </tr>   
    
       <tr class="box">
          <td>00</td><td style="text-align:left; padding-left:10px; font-weight:bold">Wigan</td>
          <td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td>
       </tr>
    
       <tr class="box">
          <td>00</td><td style="text-align:left; padding-left:10px; font-weight:bold">Watford</td>
          <td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td>
       </tr>
    
       <tr class="box">
          <td>00</td><td style="text-align:left; padding-left:10px; font-weight:bold">Wolves</td>
          <td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td>
       </tr>
    
    </tbody>
    
    </table>
    
    </body>
    
    </html>

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,225
    Thanks
    23
    Thanked 606 Times in 605 Posts
    By
    highlighted when the browser is moved over them.
    Do you mean highlighted when the pointer is moved over them.
    Try this:
    Code:
    <style type="text/css">
    tr.box:hover {
    background: #c0c0c0;
    }
    </style>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    New Coder
    Join Date
    Sep 2010
    Posts
    67
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Hi sunfighter
    I did as you suggested and it worked a treat. What i don't understand though is why it wouldn't work in an external style sheet?
    Many thanks for the help.

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,225
    Thanks
    23
    Thanked 606 Times in 605 Posts
    Style sheets are a top down thing. Rules made later supersede rules made nearer to the top. If the fourth line had background-color: blue; and at line 1134 you had background-color: green; the background would be green.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  

    Posting Permissions

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