Change the CSS of a table row when a link is in focus

Question

Change the CSS of a table row when a link is in focus

Is there a way to style a <tr> element when an <a> tag inside of it is focused?

Below is the HTML for the table:

<table>
    <tr>
        <td>
            <a href"#" tabindex="1" accesskey="e">edit</a>
        </td>
    </tr>
</table>

When using the 'Tab' key, the link becomes selected. You can change the styling of the link using the following code:

a:focus {
    background: #CCC;
}

It's not possible to wrap the <tr> in an <a> tag due to having multiple links on one table row.
Are there any alternative solutions to achieve this?

javascript html css

Answer 1

Answer №1

Parent elements cannot be directly styled using CSS. Only child and sibling elements can be targeted with CSS.

To modify parent elements, you will need to utilize JavaScript.

Answer 2

Parent elements cannot be directly styled using CSS. Only child and sibling elements can be targeted with CSS.

To modify parent elements, you will need to utilize JavaScript.

Answer 3

Answer №2

This code snippet is designed to handle FOCUS events in both Firefox and Chrome browsers. The original poster did not specifically ask for mouseenter functionality.

Internet Explorer has known issues with jQuery focus... to learn more, visit JQuery focus() is not focusing in IE but it is in Chrome.

See this JSFiddle demo for handling FOCUS in FF / Chrome: http://jsfiddle.net/pmg45/2/

Here is the HTML snippet:

<table class="table">
<tr>
    <td>
        <a class="link" href"#" tabindex="1" accesskey="e">edit</a>
    </td>
</tr>
<tr>
    <td>
        <a class="link" href"#" tabindex="1" accesskey="e">edit</a>
    </td>
</tr>

The accompanying CSS style rules are as follows:

a { display:block; cursor:pointer; }
.red{ background:red; }

And here is the jQuery script that adds/removes a 'red' class upon focus/focusout of the link elements within a table row:

$(document).ready(function(e) {
    $('.link').on('focus', function(){
        $(this).parents('tr').addClass('red');  
    });
    $('.link').on('focusout', function(){
        $(this).parents('tr').removeClass('red');   
    });
});

Answer 4

This code snippet is designed to handle FOCUS events in both Firefox and Chrome browsers. The original poster did not specifically ask for mouseenter functionality.

Internet Explorer has known issues with jQuery focus... to learn more, visit JQuery focus() is not focusing in IE but it is in Chrome.

See this JSFiddle demo for handling FOCUS in FF / Chrome: http://jsfiddle.net/pmg45/2/

Here is the HTML snippet:

<table class="table">
<tr>
    <td>
        <a class="link" href"#" tabindex="1" accesskey="e">edit</a>
    </td>
</tr>
<tr>
    <td>
        <a class="link" href"#" tabindex="1" accesskey="e">edit</a>
    </td>
</tr>

The accompanying CSS style rules are as follows:

a { display:block; cursor:pointer; }
.red{ background:red; }

And here is the jQuery script that adds/removes a 'red' class upon focus/focusout of the link elements within a table row:

$(document).ready(function(e) {
    $('.link').on('focus', function(){
        $(this).parents('tr').addClass('red');  
    });
    $('.link').on('focusout', function(){
        $(this).parents('tr').removeClass('red');   
    });
});

Answer 5

Answer №3

For more insight, check out this helpful post on Stack Overflow: How to change `tr` style when an `input` is focused?

(Extracted from the above source)
You can achieve this by using a script that utilizes getElementByID to target and modify the desired row:

<html>
<head>
<script type="text/javascript>
function changeTrStyle()
{
document.getElementById("trId").style.background = "red";
}
</script>
</head>
<body>
<table>
    <tr id="trId">
        <td>
            <input type="text" onfocus="changeTrStyle()"/>
        </td>
    </tr>
</table>
</body>
</html>

Answer 6

For more insight, check out this helpful post on Stack Overflow: How to change `tr` style when an `input` is focused?

(Extracted from the above source)
You can achieve this by using a script that utilizes getElementByID to target and modify the desired row:

<html>
<head>
<script type="text/javascript>
function changeTrStyle()
{
document.getElementById("trId").style.background = "red";
}
</script>
</head>
<body>
<table>
    <tr id="trId">
        <td>
            <input type="text" onfocus="changeTrStyle()"/>
        </td>
    </tr>
</table>
</body>
</html>

Answer 7

Answer №4

To accomplish this task, utilize jquery and refer to the provided fiddle below:

http://jsfiddle.net/Mohinder/pmg45/

Here are the CSS styles:

a { display:block; cursor:pointer; }
    .red{ background:red; }

Include the following HTML code:

<table class="table">
    <tr>
        <td>
            <a class="link" href"#" tabindex="1" accesskey="e">edit</a>
        </td>
    </tr>
    <tr>
        <td>
            <a class="link" href"#" tabindex="1" accesskey="e">edit</a>
        </td>
    </tr>
</table>

Implement the jquery script as shown below:

$(document).ready(function(e) {
    $('.link').on('mouseenter', function(){
        $(this).parents('tr').addClass('red');  
    });
    $('.link').on('mouseleave', function(){
        $(this).parents('tr').removeClass('red');   
    });
});

Answer 8

To accomplish this task, utilize jquery and refer to the provided fiddle below:

http://jsfiddle.net/Mohinder/pmg45/

Here are the CSS styles:

a { display:block; cursor:pointer; }
    .red{ background:red; }

Include the following HTML code:

<table class="table">
    <tr>
        <td>
            <a class="link" href"#" tabindex="1" accesskey="e">edit</a>
        </td>
    </tr>
    <tr>
        <td>
            <a class="link" href"#" tabindex="1" accesskey="e">edit</a>
        </td>
    </tr>
</table>

Implement the jquery script as shown below:

$(document).ready(function(e) {
    $('.link').on('mouseenter', function(){
        $(this).parents('tr').addClass('red');  
    });
    $('.link').on('mouseleave', function(){
        $(this).parents('tr').removeClass('red');   
    });
});

Answer 9

Answer №5

Modifying the parent element in CSS when its child is affected by changes is not possible.

If you want to alter the parent element, you will need to utilize jQuery.

With jQuery, you can utilize the hover function to make changes to the parent element.

For instance:

$('a').hover(function(){
  $(this).parent().css({"color":"red"});
});

The code above demonstrates how to change the color of the immediate parent of a link when it is being hovered over.

Answer 10

Modifying the parent element in CSS when its child is affected by changes is not possible.

If you want to alter the parent element, you will need to utilize jQuery.

With jQuery, you can utilize the hover function to make changes to the parent element.

For instance:

$('a').hover(function(){
  $(this).parent().css({"color":"red"});
});

The code above demonstrates how to change the color of the immediate parent of a link when it is being hovered over.

Change the CSS of a table row when a link is in focus

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

The PDF file cannot be displayed due to the dynamic loading of the path and filename

Issues with React Router server-side rendering: Error: Required prop 'history' was not specified in 'RoutingContext' prop validation

Select DOM Elements Using JavaScript CSS Queries

Creating a PDF document with multiple pages using a PHP loop, integrating with AJAX, and utilizing the m

Using Express and Node.js to display a page populated with information

Ways to conceal and reveal content within div elements

Tips for deleting extraneous cells in a table without altering the placement of the other cells and refraining from employing CSS

Using V-model binding in Vue always resets the content of text inputs

Ways to retrieve the selected option from a dropdown list

What is the accurate way to write the ID selector for the select-option-selected in JQuery?

Resolving issues with setting up d3.js in the 'Creating a Custom Map' guide

The issue with ng-if not functioning within ng-repeat is that the ng-if directive

While I believed that my template's if/else/endif logic would resolve the issue, I encountered a NoReverseMatch error when trying to access /

Discover techniques for concealing the source code of AngularJS controllers on a web browser

Ways to prevent the Layout component from rendering on the NextJS login page

Infinite scrolling feature on Kendo UI mobile listview showcasing a single item at a time

What are alternative methods for adjusting the value of a CSS property with alternative parameters?

JSX Transform error arises in Flask and Reactjs integration

Obtain unique identifiers for the purpose of sorting the items

The issue with color swapping in Internet Explorer is not functioning correctly due to