4

tr タグ、特に「COLUMNA」という単語が含まれるスペースでホバリングをトリガーする動作を無効にしたいと考えています。

奇妙なことに、Google Chrome は基になる要素のクリックを明らかに無効にしていました。Chrome でコードを実行すると、必要な動作が正確に行われますが、Firefox では、「COLUMNA」という単語が含まれるスペースにカーソルを置くと、ホバリングが発生します。 .

Chrome ではなく FireFox で動作を表示するには、これにどのようにアプローチすればよいでしょうか?

これが私のコードです：

.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;
}
<table class="formato">
  <caption>TITULO DE LA TABLA</caption>
  <!--La etiqueta <caption> define el título de una tabla. Esta etiqueta debe ser ubicada inmediatamente despué de la etiqueta de apertura <table>-->
  <thead>
    <!--Se declara semanticamente q es una cabecera de la tabla-->
    <tr>
      <th>cabecera de celda 1</th>
      <!--La etiqueta <th> define una celda de encabezado de una tabla. El texto de esta celda se representa en negrita y centrado.-->
      <th>cabecera de celda 2</th>
      <th>cabecera de celda 3</th>
      <th>cabecera de celda 4</th>
      <th>cabecera de celda 5</th>
    </tr>
  </thead>

  <tfoot>
    <!--Se declara semanticamente q es el pie de la tabla y siempre va antes del tbody-->
    <tr>
      <td colspan="5" class="pie">PIE DE TABLA</td>
    </tr>
  </tfoot>

  <tbody>
    <!--Se declara semanticamente q es el cuerpo de la tabla-->
    <tr>
      <td>Item #1</td>
      <td>Item #2</td>
      <td>Item #3</td>
      <td>Item #4</td>
      <td>Item #5</td>
      <td rowspan="5" class="columna">COLUMNAS</td>
      <!--rowspan indica el número de filas que ocupará la celda. Por defecto ocupa una sola fila-->
    </tr>
    <tr>
      <td>Item #1</td>
      <td>Item #2</td>
      <td>Item #3</td>
      <td>Item #4</td>
      <td>Item #5</td>
    </tr>
    <tr>
      <td>Item #1</td>
      <td>Item #2</td>
      <td>Item #3</td>
      <td>Item #4</td>
      <td>Item #5</td>
    </tr>
    <tr>
      <td>Item #1</td>
      <td>Item #2</td>
      <td>Item #3</td>
      <td>Item #4</td>
      <td>Item #5</td>
    </tr>
    <tr>
      <td>Item #1</td>
      <td>Item #2</td>
      <td>Item #3</td>
      <td>Item #4</td>
      <td>Item #5</td>
    </tr>
    <tr>
      <td colspan="5" class="filas">FILAS</td>
      <!--colspan indica el número de columnas que ocupará la celda. Por defecto ocupa una sola columna-->
      <td class="celda">CELDA</td>
    </tr>
  </tbody>
</table>

4

1 に答える 1

4

Firefox は、次のように、ポインタ イベントが on で無効にされ、 onの値でtr有効にされると、望ましい動作を表示します。tdauto

tr {
    pointer-events: none;
}
td {
    pointer-events: auto;
}

実施例

.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;
}
tr {
  pointer-events: none;
}
td {
  pointer-events: auto;
}
<table class="formato">
  <caption>TITULO DE LA TABLA</caption>
  <!--La etiqueta <caption> define el título de una tabla. Esta etiqueta debe ser ubicada inmediatamente despué de la etiqueta de apertura <table>-->
  <thead>
    <!--Se declara semanticamente q es una cabecera de la tabla-->
    <tr>
      <th>cabecera de celda 1</th>
      <!--La etiqueta <th> define una celda de encabezado de una tabla. El texto de esta celda se representa en negrita y centrado.-->
      <th>cabecera de celda 2</th>
      <th>cabecera de celda 3</th>
      <th>cabecera de celda 4</th>
      <th>cabecera de celda 5</th>
    </tr>
  </thead>

  <tfoot>
    <!--Se declara semanticamente q es el pie de la tabla y siempre va antes del tbody-->
    <tr>
      <td colspan="5" class="pie">PIE DE TABLA</td>
    </tr>
  </tfoot>

  <tbody>
    <!--Se declara semanticamente q es el cuerpo de la tabla-->
    <tr>
      <td>Item #1</td>
      <td>Item #2</td>
      <td>Item #3</td>
      <td>Item #4</td>
      <td>Item #5</td>
      <td rowspan="5" class="columna">COLUMNAS</td>
      <!--rowspan indica el número de filas que ocupará la celda. Por defecto ocupa una sola fila-->
    </tr>
    <tr>
      <td>Item #1</td>
      <td>Item #2</td>
      <td>Item #3</td>
      <td>Item #4</td>
      <td>Item #5</td>
    </tr>
    <tr>
      <td>Item #1</td>
      <td>Item #2</td>
      <td>Item #3</td>
      <td>Item #4</td>
      <td>Item #5</td>
    </tr>
    <tr>
      <td>Item #1</td>
      <td>Item #2</td>
      <td>Item #3</td>
      <td>Item #4</td>
      <td>Item #5</td>
    </tr>
    <tr>
      <td>Item #1</td>
      <td>Item #2</td>
      <td>Item #3</td>
      <td>Item #4</td>
      <td>Item #5</td>
    </tr>
    <tr>
      <td colspan="5" class="filas">FILAS</td>
      <!--colspan indica el número de columnas que ocupará la celda. Por defecto ocupa una sola columna-->
      <td class="celda">CELDA</td>
    </tr>
  </tbody>
</table>

于 2015-03-23T00:44:51.553 に答える