Bold font on hover in table row

Get Started
1

Hi

I have a two column table where they both contain hyperlinks but i would like the font in both columns to be bold when the user hovers over a row.

Any suggestions please?

Thanks?

2

give the table an ID


<table id="mytable">

and target just the links inside that table


#mytable a:hover { font-weight: bold; }
3

If you want to support IE6 you’ll need to use javascript. :hover is only supported on hyperlinks in that browser. Otherwise you could try css:

tr:hover a {font-weight:bold}

I’ve not tried this so can’t guarantee that it’ll work cross browser though. Otherwise a bit of jquery should suffice to add a class to the tr on hover. Something like:

$(‘tr’).hover(
function($(this).addClass(‘hover_row’)), function($(this).removeClass(‘hover_row’))
);

then in css something like:

tr.hover_row a {font-weight:bold}

Hope this helps :slight_smile:

4

^^ that’ll teach me to read the question fully next time!

5

Thanks Guys for your help. I really appreciate it! I went with this approach as you suugested and it works fine:


tr:hover a {font-weight:bold}

Thanks Again :slight_smile:

6

Ah that’s good. CSS can be ticklish with tables, some fairly random things just don’t work. Which browsers did you test it on?

7

Hi I tested it on IE8 - with also compatibility view, firefox and google chrome. I am still building the website so will test it on other browser this weekend. I have used divs to structure the site but its my product page that i used a table to display the products because its pretty much tabular data. Would you recommend this approach?


<div id="productListing">
        <h1>Flight Cases</h1>
        <table id="myTable" width="100%" border="0" cellspacing="5" cellpadding="0">
       	  
          <tr>
            <td>
            	<ul class="productDesc">
                <li><a href="#" title="">16 Section Microphone Case</a></li>
            	</ul>
            </td>
            <td><a href="#" class="modelNo" title="Model No: RHCM016"> RHCM016</a></td>
          </tr>
          	
          <tr>
            <td>
            	<ul class="productDesc">
                <li><a href="#" title="">4 Section Briefcase</a></li>
            	</ul>
            </td>
            <td><a href="#" class="modelNo" title="Model No: RHCT002"> RHCT002</a></td>
          </tr>
          	
          <tr>
            <td>
            	<ul class="productDesc">
                <li><a href="#" title="">Lift Lid Hinged Door Cranked Case</a></li>
            	</ul>
            </td>
            <td><a href="#" class="modelNo" title="Model No: RHCC12UE"> RHCC12UE</a></td>
          </tr>
          	
          <tr>
            <td>
            	<ul class="productDesc">
                <li><a href="#" title="">Shelved 14U Mixer roll Case</a></li>
            	</ul>
            </td>
            <td><a href="#" class="modelNo" title="Model No: RHCCA14U"> RHCCA14U</a></td>
          </tr>
          	
          <tr>
            <td>
            	<ul class="productDesc">
                <li><a href="#" title="">Shelved 18U Mixer roll Case</a></li>
            	</ul>
            </td>
            <td><a href="#" class="modelNo" title="Model No: RHCCA18U"> RHCCA18U</a></td>
          </tr>
          	
          <tr>
            <td>
            	<ul class="productDesc">
                <li><a href="#" title="">Twin Door 2U Rack Case</a></li>
            	</ul>
            </td>
            <td><a href="#" class="modelNo" title="Model No: RHCA2UE"> RHCA2UE</a></td>
          </tr>
          	
          <tr>
            <td>
            	<ul class="productDesc">
                <li><a href="#" title="">Twin Door 4U Rack Case</a></li>
            	</ul>
            </td>
            <td><a href="#" class="modelNo" title="Model No: RHCA4UE"> RHCA4UE</a></td>
          </tr>
          	
          <tr>
            <td>
            	<ul class="productDesc">
                <li><a href="#" title="">Twin Door 6U Rack Case</a></li>
            	</ul>
            </td>
            <td><a href="#" class="modelNo" title="Model No: RHCA6UE"> RHCA6UE</a></td>
          </tr>
          	
          <tr>
            <td>
            	<ul class="productDesc">
                <li><a href="#" title="">Twin Door Roll 12U Rack Case</a></li>
            	</ul>
            </td>
            <td><a href="#" class="modelNo" title="Model No: RHCA12U"> RHCA12U</a></td>
          </tr>
          	
          <tr>
            <td>
            	<ul class="productDesc">
                <li><a href="#" title="">Twin Door Roll 16U Rack Case</a></li>
            	</ul>
            </td>
            <td><a href="#" class="modelNo" title="Model No: RHCA16U"> RHCA16U</a></td>
          </tr>
          	
          <tr>
            <td>
            	<ul class="productDesc">
                <li><a href="#" title="">Twin Door Roll 20U Rack Case</a></li>
            	</ul>
            </td>
            <td><a href="#" class="modelNo" title="Model No: RHCA20U"> RHCA20U</a></td>
          </tr>
          	
          <tr>
            <td>
            	<ul class="productDesc">
                <li><a href="#" title="">Twin Table 16U DJ Rack case</a></li>
            	</ul>
            </td>
            <td><a href="#" class="modelNo" title="Model No: RHCCR16UDJR"> RHCCR16UDJR</a></td>
          </tr>
          	
        </table>
        </div>
8

Since each list has but one item, why a list? It’s like calling a single person a “family”.

In fact if every product is always going to be a name and a product description, why a table at all?

It could be a definition list, or a regular unordered list. It could maybe be a two-column table, but then please use either th (table headers) or the scope attribute.