td background-color не меняется, когда я нахожу его

Question

это мой код.i'm hover first tr в таблице предыдущий класс цвета фона не изменится в первых двух td в первом tr.but только тогда, когда я нахожу первый tr необходимо изменить первые два тд цвет фона изменится, когда я не хватает какой-то code.it возможно только в 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>

Answer 1

использование как этот

.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>

Answer 2

Try изменить стиль:

.cls { 
    background-color:red; 
} 
[data-class*="weeks"]:hover .cls, [data-class*="weeks"]:hover { 
    background-color:blue; 
} 

Answer 3

Проблема в том, что вы указали цвета фона для ваших <td> тегов в вашем .cls блоке. Когда вы меняете фоновой цвет <tr> при наведении, не теряйте свои собственные стили, и они всегда будут сидеть «сверху» фона <tr>, так сказать. Чтобы исправить это, в частности, selectd в <td> дети <tr> время парил над, например .:

.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>