Combining a Hyperlink with a Table Target

I'm currently trying to find a way to target both a table cell (TR > TD) and a hyperlink within the same row.

Here's an example of the HTML:

<div class="CourseLayout">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr><td height="30" valign="middle"><a href="mylink">Test Link</a></td></tr>
</table>
</div>

This is the CSS I've been using:

.CourseLayout tr:hover td, a:hover{
 background-color: #F1B242;
 color: #0C1A31;
 }

The goal is to allow users to hover over a row, highlight it, and change the font color of that row simultaneously. Does anyone have any insights on what might be incorrect in my approach?

htmlcss

Answer №1

By using the CSS selector .CourseLayout tr:hover td, you can target the hyperlink within a table cell when someone hovers over the entire row. Here is how you can style the hyperlink and background color in this scenario:

.CourseLayout tr:hover td {
 background-color: #F1B242;
 }

.CourseLayout tr:hover td a {
 color: #0C1A31;
 }


.CourseLayout tr:hover td {
  background-color: #F1B242;
}
.CourseLayout tr:hover td a {
  color: red;
}
<div class="CourseLayout">
  <table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td height="30" valign="middle"><a href="mylink">Test Link</a>
      </td>
    </tr>
  </table>
</div>

View Demo

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

Utilizing Inline Placement within Email Templates

Seeking assistance in finding an alternative method to achieve the desired functionality in an email template. Having trouble with inline position styling being removed. table { width: 80%; border-spacing: 0; } table tr td.label-dots { positio ...

htmlcssemailhtml-emailinline

How does the function window.open determine whether to open a new tab or switch to an existing tab based on specific criteria?

As I navigate through new tabs and existing tabs, I am curious about the criteria that determines whether a new tab is opened or if the browser simply reopens an existing tab with the same name. Could someone shed light on the specific parameters being co ...

javascriptjqueryhtmltabs

Different choices for data attributes in React

Recently, I downloaded a new app that requires multiple API calls. The first API call retrieves 20 Objects, each with its own unique ID. The second API call is made based on the IDs from the first call. To display this data in my component: <div> ...

javascripthtmlreactjs

Using the / (forward slash) in CSS styling statements

Similar Query: Understanding the CSS font shorthand syntax As I was examining the styling on Apple's website, I encountered a CSS rule that left me puzzled: body { font: 12px/18px "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana, ...

css

The color of the last clicked DIV is supposed to stay permanent, but for some unknown reason

I'm attempting to replicate this design in my project: http://jsfiddle.net/AYRh6/26/ However, I am facing issues with it and cannot pinpoint the exact problem in the code. I am using code for a toggle effect. Any assistance would be greatly appreciat ...

javascriptjqueryhtmlcss

What is the reason behind the inability to overflow the Safari viewport?

My website, , has a footer that is clickable in Chrome but not in Safari. When users scroll to the footer in Safari, the screen jumps back to the top, making it inaccessible. Can anyone help me identify the issue? Below is the CSS code for my React projec ...

cssreactjssafari

What are some strategies for increasing my website's mobile responsiveness?

I've recently completed my online portfolio, and it appears to be functioning properly on desktop computers. However, I'm encountering responsiveness issues when viewing it on other devices or smartphones. Even though I have included the necessar ...

cssbootstrap-4flexbox

Having trouble getting CSS Image Hover to work correctly?

I'm having trouble implementing a hover effect that changes the color of an image to blue when it is hovered over by the mouse. I've defined a class for the images and styled it in my CSS, but the effect isn't working as intended. I've ...

htmlcss

How can I showcase images stored in an array using JavaScript?

I am currently developing a role-playing game (RPG). In order to enhance the gameplay experience, I am trying to implement a for loop that will dynamically generate buttons on the screen. Here is the code snippet I have created so far: $(document).ready(f ...

javascripthtml

Using the CSS trick of First-of-type and Last-of-type can result in shortened rounded edges when viewed in IE11

When using the radio+label trick to style radio buttons, a peculiar issue arises in Internet Explorer 11 (IE11). The first and last buttons in each set appear to have their bottom parts cut off or shortened, depending on the background displayed. Removing ...

cssinternet-explorercss-selectorscross-browser

What value does the "left" property default to?

When attempting to change the 'left: 0' property to 'left:none', I found that it did not work. Other properties such as margin and padding do work when overwritten. I aim to find a solution for this problem without altering the origina ...

htmlcss

Click the button to instantly scroll to a particular word with highlighting, and with another click, jump to the next occurrence

In order to achieve the objective, simply click on a button that will search for and scroll to a specific word while highlighting it. The same button can be clicked again to find the next occurrence, and so on. If you need an example of how this works, ch ...

javascripthtmljquery

Discovering the best way to organize and sort information retrieved from the backend within an Angular

How can I restrict a user to only search for data that has been provided from the backend and prevent them from creating new data? In my backend, there are two words: "Chart" and "Map". I am looking for a way to limit the user's search to only these ...

htmlangulartypescriptfilterangular-material

Issue with AngularJS: Local storage not saving updated contenteditable data

My local storage implementation stops working when I attempt to incorporate contentEditable feature. Here is the link to the CodePen for reference: https://codepen.io/zanderbush/pen/WNwWbWe. Any assistance would be greatly appreciated. The functionality w ...

javascripthtmlangularjs

Is it possible to use the Stop Button on the HTML5 Audio Tag to halt a live MP3 stream

Is there a way to add a stop button as well? Currently, I have play and pause buttons, but the stop function doesn't truly clear the music buffer in the browser; it just stops playback without resetting to the beginning. This is fine for MP3 files but ...

javascripthtmlaudiotags

Prevent tooltips from displaying outside of an HTML table by using the overflow hidden property for horizontal scrolling

TL;DR: Struggling to position and display tooltips in a table due to the constraints of overflow: hidden. An example has been created to demonstrate the issue with tooltips not displaying correctly within a table. The problem arises because the table nece ...

htmlcsshtml-table

Users using an iPhone are unable to adjust the scale or scroll on this website

I find myself wondering what I might be overlooking in this situation Here is the HTML code: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="shortcut icon" href="../../nImg/favicon.ico" ...

iphonehtmlcssscale

Transforming a Bootstrap 4 dropdown navbar by replacing the caret with Fontawesome 5 icons for Plus and Minus

After spending several days trying to find a solution, I am still struggling. I have managed to create a responsive Navbar with Dropdowns using Bootstrap 4. Now, my goal is to replace the caret with a Plus and Minus sign at the end of each row on small dev ...

twitter-bootstrapcssbootstrap-4font-awesome

Tips for customizing text field appearance in Safari and Chrome

I haven't had a chance to test it on IE yet. My goal is to create a unique style for the background image and text box shape, along with borders, for the search bar on my website, [dead site]. If you check it out on Firefox or Opera and see the sear ...

htmlcssformsbrowsercross-browser

Is there a way to lead to a password-protected page without making it accessible through the URL?

I'm currently honing my skills in web development and embarking on a project to create an interactive puzzle website. The premise is simple - the homepage will feature just an answer input field where users can enter the correct solution to progress t ...

javascriptphphtml