What is the best way to prevent a single cell within a table from hovering?

Within a table cell, I have another table. The outer table has a hover effect applied to it, but I want to prevent the inner table with the id "table_I_don_not_want_to_hover" from inheriting this hover behavior like the rest of the cells and rows. I need to maintain its original color scheme. Unfortunately, I am unable to modify the CSS that triggers the hover effect on the entire table as it is located in a separate file which I do not have access to. Therefore, I must come up with an alternative solution to override the hover effect for this specific table:


    <table cellspacing="0" cellpadding="5px">
        <tbody>

            <tr><td colspan="100" style="Text-Align:Center;Font-Size:16Px;Font-Weight:Bold">Appeso</td></tr>
            <tr>
                <th nowrap="" class="hc" style="width: 50px">
                    ........
                </th> 
                <th nowrap="" class="cl3">row 1</th>
                <th nowrap="" class="cl3">row 2</th>
                <th nowrap="" class="cl3">row 3</th>
                <th nowrap="" class="cl3">row 4</th>
                <th nowrap="" class="cl3">row 5</th>

            </tr>

        </tbody>
        <tbody class="class1">

            <tr class="">
                <td nowrap="" class="cl2" rowspan="8">
                    <input type="checkbox" value="1111"  name="chk_p">
                    </td> 

                    <td nowrap=""  rowspan="8">

                    <td nowrap="" class="c">row 1</td>
                    <td nowrap="" class="c ">row 2</td>

                    <td nowrap="" class="c">row3</td>
                    <td nowrap="" class="c">row4</td>
                    <td nowrap="" class="c">row5</td>

                <tr id="id" hidden="" style="display: table-row;">
                    <td class="cl no_hover"></td>
                    <td colspan="8" class="cl no_hover">
                        <table id="table_I_don_not_want_to_hover" cellspacing="0" style="border-collapse: collapse; width: 100%%">
                            <tbody><tr class="no_hover">
                                <td class="dc_header_taglia">row</td>
                                <td class="dc_header_taglia">row</td>
                                <td class="dc_header_taglia">row</td>
                                <td class="dc_header_taglia">row</td>
                                <td class="dc_header_taglia">row</td>
                            </tr>
                            .............

I attempted the following:

.no_hover{
           pointer-events: none;
         }

However, this solution disabled all events including the jQuery code responsible for showing/hiding rows. As I am not very experienced with CSS, additional attempts were made:


.tr:hover > div {
    opacity: 0.5;
}
.tr:hover > div:hover {
    opacity: 1.0;
}
.td:hover > div {
    opacity: 0.5;
}
.td:hover > div:hover {
    opacity: 1.0;
}

I'm still struggling to find the right CSS solution without disrupting the functionality of the table.

jqueryhtmlcsshtml-tablehover

Answer №1

Applying the hover property to all td elements except those with the not_hover class can be achieved using the not() selector. Here is an example implementation:

table,tr,td
{
  border:1px solid black;
}
td:not(.not_hover):hover{
  background-color:yellow;
}
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Email<th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="not_hover">Hello</td>
      <td>World</td>
    </tr>
     <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
       <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
       <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
       <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
       <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
  </tbody>
</table>

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

Revamp Child Relationship in Ruby on Rails Form

One of the challenges I'm facing is with editing and updating priorities for parent accounts in my application. The "Accounts" model acts as the parent, while the "Priorities" model serves as the child. Creating new priorities for these accounts is s ...

htmlruby-on-railsformsassociationsparent-child

Transforming bootstrap 4 rows into cards or a card deck

Having some difficulty configuring Bootstrap cards to display correctly. The original template had one item per row in columns, but I want to transform it into polaroid-style cards while still using Bootstrap 4 for a clean look. Original template (excerpt ...

phphtmlcssmysqlibootstrap-4

Bootstrap component malfunctioning and not performing as expected

Currently, I am learning how to use Bootstrap and attempting to replicate the example themes found on their official website. The specific theme I am focusing on is available at this link: https://getbootstrap.com/docs/4.3/examples/pricing/ Unfortunately, ...

htmlcsstwitter-bootstrap

The anchor tag does not seem to be functioning properly within the fancybox feature

Whenever I click on the "LOGOUT" button, I would like to be automatically redirected to the logout page. <div id="emailverification" style="display:none;"> <div style="width: 100%;float:left;background-color: #E4E5EA;"> $(document).ready( ...

jqueryfancybox-2

Different ways to display a PHP value that has been passed to an Ajax call within a radio button

I am facing an issue with my PHP code and Ajax script. I have a list of values being passed from the PHP code to the Ajax script, but the gender value is not being checked in the radio button. Here is an example of the passed values: {"name":"Okay","age": ...

javascriptjqueryajaxhtml

What is causing the nested flex container's height to not increase along with its children?

When looking at this codepen, it's clear that the children are overflowing the parent's height. However, the real question is why doesn't the flex parent adjust its height to accommodate the children? One way to fix this issue is by using d ...

htmlcssflexbox

How can I invoke a TypeScript function within HTML code?

Currently, I am working on an Angular project where I have implemented two straightforward methods in a TypeScript file: findForm(text: string, forms: Array<string>) { for (let form of this.forms) { if (text.includes(form)) { retur ...

htmlangulartypescript

Problem with Jquery slider user interface

Encountering an issue with the min and max values of the jQuery Slider UI. Set the minimum value to 5000, maximum to 1000000, with step increments of 25000. However, when viewing it on the front-end, the displayed values are not as expected: https://i.sst ...

javascriptjquery

What is the best way to ensure the button remains centered when the screen is resized?

.codrops-top { line-height: 30px; font-size: 13px; background: #fff; background: rgba(255, 255, 255, 0.8); text-transform: uppercase; z-index: 9999; position: absolute; width: 100%; to ...

htmlcsstwitter-bootstrap-3

Issue: $injector:unpr Unrecognized Provider: itemslistProvider <-

I've spent several days debugging the code, but I can't seem to find a solution. I've gone through the AngularJS documentation and numerous Stack Overflow questions related to the error, yet I'm still unable to identify what's caus ...

javascripthtmlangularjsweb-services

Stacked Bootstrap cards

Currently, my code is structured as follows: <div class="row row-cols-1 row-cols-md-2 g-4"> {{#each stories}} <div class="col"> <div class="card shadow-sm"> <img class="card-img-top" src="{{ image }}"> <d ...

htmlbootstrap-4

Tips for beginners on determining the best placement for CSS properties on a webpage

As a newcomer to CSS, I have encountered some issues when working with properties in different sections of code. For example: P1: Please review the implementation of #menu and #menu a. The code can be found here. P2: Also, take a look at #menu a specific ...

htmlcsswebtypesetting

Display a variety of images upon submitting an AJAX request

When I make an AJAX request to display an image: $('div.loading').ajaxStart(function(){ $(this).removeClass('none'); }).ajaxComplete(function(){ $(this).addClass('none'); }); But I nee ...

jqueryajax

Creative approach to achieving responsive borders with Bootstrap 5

Looking to create a dynamic border using Bootstrap 5 that will hide at specific breakpoints. I tried the following code: <p class="border-bottom border-lg-0-bottom border-lg-end">text here</p> Unfortunately, this code did not work a ...

cssbootstrap-5

Utilizing UIWebView for dynamic HTML templating

Greetings! I am seeking to develop an HTML template (either internal or external) for the data received from an XML request. The following code has been functioning smoothly thus far: NSString* desc = [screenData.jsonVars objectForKey:@"descriptionTXT ...

iphonehtmliosuiwebview

Tailored Search Filter - Yajra Datatables Solution

I've been working with yajra data tables and utilizing it as a service. I'm curious if there's a way to create a custom filter search for it. Any guidance or resources available? Below is the snippet of my code: public function dataTable($ ...

phpjquerylaraveldatatablesyajra-datatable

Hugo/Docsy encountered an error while executing the template at <.url>: unable to assess the url field in type bool

Currently, I'm in the process of creating a static web application using Hugo in combination with the Docsy theme. In my code for the Docsy Partials, I'm attempting to incorporate a conditional statement that appends the word mailTo: to my .url i ...

htmlhugohugo-shortcodedocsy

Step-by-step guide to implementing a month and year date-picker in Mozilla Firefox

I'm looking to create input fields where users can add the month and year. I tried using the code below, but unfortunately Mozilla Firefox doesn't support it. <input type="month" id="start" name="start"> Does ...

javascripthtmlcss

When resizing the browser, HTML/CSS elements tend to shift positions :(

I've experimented with different position values like absolute, fixed, and static without success. Wrapping the element in a div didn't yield the desired result, so I'm seeking assistance to correct this. (If that is the solution) The issu ...

htmlcssstylesdisplay

css apply liquid-like resizing to div element

I'm trying to set the height of the container to automatically adjust if the content overflows, allowing it to flow naturally. This is the code I'm currently using on my site: Here Please disregard the HTML and focus only on the CSS as that&apo ...

htmlcssheightsizecontainers