Emphasizing a full row within a table is a way to draw attention

I have a piece of HTML/CSS code that successfully underlines the text in a single table cell when hovering over it. However, I want to extend this effect to underline all text in a row of cells, rather than just one cell. It's not necessary for the entire row to be underlined with a single line - having a line underneath each text item would suffice, although a single line across all items would also work if it's easier.

I attempted changing 'a:' to 'tr:' but saw no change in the outcome.

<html>
<head>
<title>Project Index</title>
    <style type="text/css">

    a:link {text-decoration:none;}
    a:hover {text-decoration: underline; }

    </style>
</head>
<body>
<h2 style="text-align: center;">
Project Index</h2>
<h3 style="text-align: center;">
2013-06-11 18:44</h3>
<table align="left" border="0" cellpadding="1" cellspacing="1" height="29" width="728" style="font-family:arial,helvetica,sans-serif;font-size: 12px;">
<tbody>
<tr>
<th scope="col">
Project
<hr />
</th>
<th scope="col">
Activity
<hr />
</th>
<th scope="col">
Items
<hr />
</th>
</tr>
<tr>
 <th scope="col" style="text-align: left;">
<a style="color:#0000cd;" href="C:\Users\Caterpillar\Google Drive\SPDA\Standards\Project Reports\Full Reports\Test Project 1.html">Test Project 1 </a></th>
<th scope="col" style="text-align: left;">
<a style="color:#0000cd;" href="C:\Users\Caterpillar\Google Drive\SPDA\Standards\Project Reports\Full Reports\Test Project 1.html">2013-06-09 17:31</a></th>
<th scope="col" style="text-align: left;">
<a style="color:#0000cd;" href="C:\Users\Caterpillar\Google Drive\SPDA\Standards\Project Reports\Full Reports\Test Project 1.html">RFI:5 CCO:2 </a></th>
</tr>
<tr>
 <th scope="col" style="text-align: left;">
<a style="color:#0000cd;" href="C:\Users\Caterpillar\Google Drive\SPDA\Standards\Project Reports\Full Reports\Test Project 2.html">Test Project 2 </a></th>
<th scope="col" style="text-align: left;">
<a style="color:#0000cd;" href="C:\Users\Caterpillar\Google Drive\SPDA\Standards\Project Reports\Full Reports\Test Project 2.html">2013-06-06 09:06</a></th>
<th scope="col" style="text-align: left;">
<a style="color:#0000cd;" href="C:\Users\Caterpillar\Google Drive\SPDA\Standards\Project Reports\Full Reports\Test Project 2.html">RFI:2 </a></th>
</tr>
</tbody>
</table>
</body>
</html>

Answer №1

Here is a suggestion for your CSS style:

tr a {text-decoration:none;}
tr:hover a {text-decoration: underline;}

UPDATE: To ensure compatibility with Internet Explorer, remember to include the correct DOCTYPE declaration in your HTML markup. Add

<!DOCTYPE html>

Just before

<html>

Answer №2

It's effective for my needs

tr:hover a {text-decoration: underline; }

The reason behind this is that the text-decoration should only affect the anchor tags within the row being hovered over.

Answer №3

To create a hover effect on table rows, use the CSS selector tr:hover. Keep in mind that this may not work on very outdated browsers like IE7 and below.

tr:hover a { text-decoration: underline; }

Check out the demo: http://jsbin.com/agasih/1

In the demo, I have updated the data rows in your table to use the more appropriate <td> elements.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the method to verify if a pop-up browser window has completed its loading process?

There is a link on my website that opens a new window. However, sometimes the new window takes so long to load. To prevent users from clicking on the link before the new window finishes loading, I want to disable it until then. I am aware that one way to ...

One of my AngularJS directives seems to be malfunctioning while the rest are working fine. Can you help me troubleshoot

Recently, I've been immersing myself in the job search process and decided to create a website as a sort of online resume while also learning AngularJS. I enrolled in the Angular course on CodeSchool and am slowly building my website to my liking. (Pl ...

Optimizing the particle rendering speed for HTML5 <canvas> elements

Currently conducting an experiment to enhance the maximum particle count before frame-rates begin to decrease in HTML5 Canvas. Utilizing requestAnimationFrame and employing drawImage from a canvas as it appears to be the most efficient method for image re ...

The CSS styling undergoes a transformation following the integration of Bootstrap

Hey there! I'm new to the world of web development and currently working on creating a simple todo list application. Recently, I revamped my webpage design by incorporating Bootstrap, and the results were pretty exciting! Original Code without Bootst ...

Error message: JavaScript multiline strings within backticks are currently unsupported in Internet Explorer

My HTML string, stored in a variable, is being used to populate the innerHTML. Although the first example (using backtick syntax) is simple, it does not function in Internet Explorer 11. Is there a way to make the first example work in Internet ...

Utilizing JavaScript to arrange the dots around the circle proves to be glitchy

I am having trouble positioning dots around a circle. The top and bottom points are not aligning properly, resulting in a buggy display. What could be causing this issue? How can I fix this problem? $(function(){ var globe = $('#center') ...

A guide on how to modify a CSS property to set the display to none upon clicking a radio button

Currently, I am attempting to display two input boxes in a table when I select specific radio buttons and hide them if I choose another option. The code I have does work but has a minor issue, function disappear() { document.getElementsByClassName("ta ...

Develop interactive div elements with the help of JavaScript/jQuery

Exploring dynamic div creation using javascript or jquery and looking for guidance. <div id="clickable"> <button class="start">Default</button> <button class="random">Randon</button> <button class="gradient"> ...

Efficient PHP caching solution for optimizing JavaScript and CSS performance

I'm facing a unique challenge that I can't seem to solve through typical Google searches. I'm in the process of consolidating all my javascript and css into separate php files using require_once() to pull in the content. The structure of my ...

Pressing the dart key will alter the sprite's direction in a 2D game

Recently, I've been working on a Dart game where the user controls a space ship sprite using the W, A, S, and D keys. Pressing these keys will move the sprite up, left, right, and down respectively. Additionally, pressing the Space bar will launch a p ...

Using CSS3 gradient in grey instead of white

I came across an amazing example by Chris Coyier showcasing a "read more" button. I attempted to replicate this by creating a simple fadeout effect from white to transparent, but unfortunately, I ended up with a grey gradient instead. You can view my atte ...

Positioning elements precisely on a webpage through absolute positioning and floating them

This seems to present a conflicting situation. Ideally, I am looking to position two child elements on the left and right edges of the parent element, vertically centered, and overlaying all other sibling elements. ...

Guide to switching a button using JavaScript

I am trying to create a button that will toggle the font size between 16px and 14px when clicked. The button text should also change from "Increase Font" to "Decrease Font" accordingly. UPDATE: I managed to get it working, but it only toggles twice and th ...

Adjusting the color of text based on the fulfillment of a condition

Is there a way to change the text color of a variable based on its value in PHP? For example, if the $status is set to admin, can we display it in red when echoed out using <h3>Status: <?php echo $status; ?></h3>? I'm not quite sure ...

Tips for adjusting the width of a table

add your image description hereImagine a scenario where there is a table featuring two columns. <table> <tr><td>Email</td> <td></td></tr> <tr><td>Full name</td> <td></td></tr> ...

What is the best way to center a heading element within a section on a webpage?

I need assistance aligning the h1 element with the specific class wish to the center of its section, both horizontally and vertically. Unfortunately, I have been unable to achieve this thus far. Any guidance would be greatly appreciated. Below you will fi ...

What could be causing the absolute positioned element to not follow the positioning rules as expected?

Currently, I am following a guide on creating a website using Dreamweaver (). However, I have encountered a step in the tutorial that I am struggling to comprehend. The issue lies with an element named #navlink, which is absolutely positioned in the DOM s ...

Tabindex malfunction in Bootstrap dropdown menu when nested within a form and pressing Enter key

Within my form, I have integrated a Bootstrap 3 dropdown menu situated between two text input fields. The dropdown's role="menu" attribute allows for navigation using the up/down arrow and Enter keys. However, after making a selection in the dropdown ...

We are creating a table in JavaScript and mistakenly adding an unnecessary tbody

I am currently utilizing a combination of plain JavaScript and Jquery in order to dynamically generate a table. The issue arises when I attempt to use a for loop to iterate through the data obtained from an Ajax request, as it fails to create new rows. To ...

Using addClass and removeClass functions in JQuery when selecting a radio button

I am facing an issue with my radio buttons being displayed as images. When a picture (radio button) is selected, I want the other pictures to become hidden. To achieve this, I plan to add a class to the checked picture and then add another class to the unc ...