title: CSS pointer-events to disable clicks on underlying elements too
body: <p>I want to disable the behavior from triggering the hovering on the tr tags, specifically on the space that has the word "COLUMNA".</p>
  
  <p>Strangely, Google Chrome apparently disabled clicking of underlying elements, you can run the code on Chrome and it has the exact behavior that I need, but on Firefox it does fire hovering when I put the cursor over the space that has the word "COLUMNA".</p>
  
  <p>How would I approach this to make the behavior shown on Chrome, but on FireFox?</p>
  
  <p>Here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.formato {
    border: 1px solid #000;
    border-collapse: collapse;
    margin-left: 100px;
    margin-bottom: 100px;
  }
  .formato th,
  .formato td {
    border: 1px solid #000;
    padding: 20px;
  }
  .formato tr:hover td:not(.columna):not(.filas):not(.pie):not(.celda) {
    background: #ccc;
    cursor: pointer;
  }
  .columna,
  .filas,
  .pie,
  .celda {
    pointer-events: none;
  }
  .formato td:not(.columna):not(.filas):not(.pie):not(.celda):hover {
    background: #000 !important;
    color: #fff;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table class="formato"&gt;
    &lt;caption&gt;TITULO DE LA TABLA&lt;/caption&gt;
    &lt;!--La etiqueta &lt;caption&gt; define el título de una tabla. Esta etiqueta debe ser ubicada inmediatamente despué de la etiqueta de apertura &lt;table&gt;--&gt;
    &lt;thead&gt;
      &lt;!--Se declara semanticamente q es una cabecera de la tabla--&gt;
      &lt;tr&gt;
        &lt;th&gt;cabecera de celda 1&lt;/th&gt;
        &lt;!--La etiqueta &lt;th&gt; define una celda de encabezado de una tabla. El texto de esta celda se representa en negrita y centrado.--&gt;
        &lt;th&gt;cabecera de celda 2&lt;/th&gt;
        &lt;th&gt;cabecera de celda 3&lt;/th&gt;
        &lt;th&gt;cabecera de celda 4&lt;/th&gt;
        &lt;th&gt;cabecera de celda 5&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
  
    &lt;tfoot&gt;
      &lt;!--Se declara semanticamente q es el pie de la tabla y siempre va antes del tbody--&gt;
      &lt;tr&gt;
        &lt;td colspan="5" class="pie"&gt;PIE DE TABLA&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tfoot&gt;
  
    &lt;tbody&gt;
      &lt;!--Se declara semanticamente q es el cuerpo de la tabla--&gt;
      &lt;tr&gt;
        &lt;td&gt;Item #1&lt;/td&gt;
        &lt;td&gt;Item #2&lt;/td&gt;
        &lt;td&gt;Item #3&lt;/td&gt;
        &lt;td&gt;Item #4&lt;/td&gt;
        &lt;td&gt;Item #5&lt;/td&gt;
        &lt;td rowspan="5" class="columna"&gt;COLUMNAS&lt;/td&gt;
        &lt;!--rowspan indica el número de filas que ocupará la celda. Por defecto ocupa una sola fila--&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Item #1&lt;/td&gt;
        &lt;td&gt;Item #2&lt;/td&gt;
        &lt;td&gt;Item #3&lt;/td&gt;
        &lt;td&gt;Item #4&lt;/td&gt;
        &lt;td&gt;Item #5&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Item #1&lt;/td&gt;
        &lt;td&gt;Item #2&lt;/td&gt;
        &lt;td&gt;Item #3&lt;/td&gt;
        &lt;td&gt;Item #4&lt;/td&gt;
        &lt;td&gt;Item #5&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Item #1&lt;/td&gt;
        &lt;td&gt;Item #2&lt;/td&gt;
        &lt;td&gt;Item #3&lt;/td&gt;
        &lt;td&gt;Item #4&lt;/td&gt;
        &lt;td&gt;Item #5&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Item #1&lt;/td&gt;
        &lt;td&gt;Item #2&lt;/td&gt;
        &lt;td&gt;Item #3&lt;/td&gt;
        &lt;td&gt;Item #4&lt;/td&gt;
        &lt;td&gt;Item #5&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td colspan="5" class="filas"&gt;FILAS&lt;/td&gt;
        &lt;!--colspan indica el número de columnas que ocupará la celda. Por defecto ocupa una sola columna--&gt;
        &lt;td class="celda"&gt;CELDA&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>