2012-11-29 3 views
6

Ich arbeite an einer Webanwendung mit Twitter Bootstrap. In einer unserer Ansichten gibt es eine Tabelle, die die Klasse .table-hover verwendet. Es gibt einige bestimmte Zellen in der Tabelle, die ich jedoch nicht hervorheben möchte, wenn der Rest der Zeilen hervorgehoben wird. Welche Stilregeln sollte ich verwenden, um diesen Effekt zu erzielen?Entfernen Tabelle-Hover-Effekt für eine einzelne Zelle in einer Twitter-Bootstrap-Tabelle

Dies ist in etwa wie meine Ansicht Tabelle organisiert ist:

<table class="table table-hover"> 
    <thead> 
     <tr> 
      <th /> 
      <th>Header 1</th> 
      <th>Header 2</th> 
      <th>Header 3</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td rowspan="2">Row Group "Heading" 1</td> 
      <td>Content</td> 
      <td>Content</td> 
      <td>Content</td> 
     </tr> 
     <tr> 
      <td>Content</td> 
      <td>Content</td> 
      <td>Content</td> 
     </tr> 
     <tr> 
      <td rowspan="2">Row Group "Heading" 2</td> 
      <td>Content</td> 
      <td>Content</td> 
      <td>Content</td> 
     </tr> 
     <tr> 
      <td>Content</td> 
      <td>Content</td> 
      <td>Content</td> 
     </tr> 
    </tbody> 
</table> 

Ich möchte die Zellen machen, die zwei Zeilen umspannen nicht markieren, wenn sie über schwebte sind.

EDIT:

ich diese CSS versucht:

td.rowTitle:hover { background-color: transparent; } 

Es funktioniert nicht, leider. Ich denke es kann sein, weil die ganze Zeile markiert ist, nicht nur die Zelle ...

Antwort

14

Dies ist, was die Bootstrap-CSS wie folgt aussieht:

.table-hover { 
      tbody { tr:hover td, tr:hover th 
          { background-color: @tableBackgroundHover; } 
         } 
      } 

Mit etwas JQuery:

$('td[rowspan]').addClass('hasRowSpan'); 

Anschließend können Sie das folgende CSS verwenden es außer Kraft zu setzen:

tbody tr:hover td.hasRowSpan { 
      background-color: none; /* or whatever color you want */ 
} 
+0

es entspricht "tbody tr: hover td [rowspan]" und jQuery ist nicht notwendig – iamawebgeek

0

Ich bin mir nicht sicher, welche Methode verwendet wird, um diese "Hover" zu erstellen, aber Sie können bestimmte Regeln für Hover hinzufügen, wenn Sie Trennen Sie diese Zellen. Geben Sie diesen Zellen einen Klassennamen, und Sie können dann Ihre spezifischen Stile/Hover für sie festlegen.

Verwandte Themen