Ceci est mon code. Je passe le premier tr dans le tableau les couleurs d'arrière-plan de la classe précédente ne changeront pas dans les deux premiers td dans le premier tr. mais seulement lorsque je survolerai le premier tr doit changer. Les deux premiers td changeront de couleur, où je ' m manque de code.it n'est possible qu'en css

.cls{
background-color:red;
}
[data-class*="weeks"]:hover{
background-color:blue;
}
<table border="1px">
  <thead>
    <tr>
      <th>row1</th><th>row2</th><th>row3</th><th>row4</th><th>row5</th>
    </tr>
  </thead>
  <tbody>
    <tr data-class="weeks">
      <td class="cls">1</td><td class="cls">2</td><td>3</td><td>4</td><td>5</td>
    </tr>
    <tr data-class="weeks">
      <td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
    </tr>
  </tbody>
</table>
1
vijay 8 mars 2016 à 15:13

3 réponses

Meilleure réponse

Utiliser comme ça

.cls{
background-color:red;
}
[data-class*="weeks"]:hover td{
background-color:blue;
}
<table border="1px">
  <thead>
    <tr>
      <th>row1</th><th>row2</th><th>row3</th><th>row4</th><th>row5</th>
    </tr>
  </thead>
  <tbody>
    <tr data-class="weeks">
      <td class="cls">1</td><td class="cls">2</td><td>3</td><td>4</td><td>5</td>
    </tr>
    <tr data-class="weeks">
      <td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
    </tr>
  </tbody>
</table>
1
code.rider 8 mars 2016 à 12:20

Le problème est que vous avez spécifié des couleurs d'arrière-plan pour vos <td> balises dans votre bloc .cls. Lorsque vous changez la couleur d'arrière-plan du <tr> en survol, les <td> ne perdent pas leurs propres styles, et ils seront toujours assis "au-dessus" des <tr> fond, pour ainsi dire. Pour résoudre ce problème, sélectionnez spécifiquement les enfants <td> des <tr> survolés, par exemple:

.cls{
  background-color:red;
}
[data-class*="weeks"]:hover td {
  background-color:blue;
}
<table border="1px">
  <thead>
    <tr>
      <th>row1</th><th>row2</th><th>row3</th><th>row4</th><th>row5</th>
    </tr>
  </thead>
  <tbody>
    <tr data-class="weeks">
      <td class="cls">1</td><td class="cls">2</td><td>3</td><td>4</td><td>5</td>
    </tr>
    <tr data-class="weeks">
      <td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
    </tr>
  </tbody>
</table>
1
Ken Bellows 8 mars 2016 à 12:20

Essayez de changer le style:

.cls {
    background-color:red;
}
[data-class*="weeks"]:hover .cls, [data-class*="weeks"]:hover {
    background-color:blue;
}
0
Thomas Bormans 8 mars 2016 à 14:49