Estoy usando bootstrap para el efecto de hover para mi las filas de la tabla. Pero quiero quitar el efecto de hover cuando una fila de la tabla está seleccionada. Me puse una clase (seleccione fila) con JavaScript cuando se selecciona una fila. No parece estar funcionando para mí. Estoy usando la cláusula de no en el css.

Mi css:

.table-hover > tbody > tr:not(.select-row):hover > td, 
.table-hover > tbody > tr:not(.select-row):hover > th {
    background-color: #f5fafe;
    color: black;
}

tr.select-row {
    background-color: #bddef9;
}

Html:

<table class="table table-condensed table-hover">
   <tr>
       <td>xxx</td>
       <td>xxx</td>
   </tr>
</table>
InformationsquelleAutor MindGame | 2015-02-10

3 Comentarios

  1. 6

    Para que la fila seleccionada de fondo no cambiar, tienes que sobreescribir el existente hover estilo.

    Bootstrap objetivos de la td de fondo en hover en lugar de tr.

    Esto funciona:

    .table-hover > tbody > tr.select-row:hover > td,
    .select-row > td {
        background-color: #bddef9;
    }

    Demo De Violín

    • Esto funcionó para mí con Bootstrap 3.3 y Angular 1.5. Yo estaba usando un ng-class=»{seleccionado: selectedTable == tbl} el atributo» en mi ng-repeat fila para resaltar, y el pase fue primordial la selección. Después de cambiar seleccione la fila seleccionada de Jack revisión resuelto mi problema.
    • Bootstrap 4 objetivos de la tr sí, no de la td en su interior.
  2. 0

    Jack‘s solución no funciona para mí (Cromo 62.0.3202.94). Lo que he encontrado de trabajo es algo que utiliza el CSS :not() selector. Por lo que dar la clase tableRowHover como la clase de la tabla para permitir una fantasía ratón sobre el efecto. Se define en el archivo CSS, como

    .tableRowHover tbody tr:not(.tableRowHoverOff):hover td { .... }

    y, a continuación, puede utilizar la clase tableRowHoverOff para cada <tr> donde desea desactivar explícitamente de él.

    Violín Demo: http://jsfiddle.net/mk319zzm/

  3. -3

    jquery solución a este problema

    $('tr').select(function()
    {    
     $(this).removeClass('classtoremove'); 
    });

    ahora puede aplicar .método css a $(this) objeto

    • El OP no es preguntar acerca de text selection, por lo que el jquery select método no se aplica aquí. Además, no hay ninguna clase de ser eliminado.

Dejar respuesta

Please enter your comment!
Please enter your name here