td背景顏色不會改變當我徘徊它

Question

這是我的code.i'm懸停第一個tr在表中上一類背景顏色將不會改變前兩個td在第一tr.but只有當我將第一個tr懸停必須改變一號兩款TD背景顏色會改變，在那裏我錯過了一些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

嘗試改變風格：

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

Answer 3

的問題是，您所指定爲您<td>標籤背景顏色在您的.cls塊。當您更改<tr>的背景顏色時，請將其懸掛在<td>上。不要失去自己的風格，因此可以說它們總是坐在<tr>的背景上。爲了解決這個問題，特別是selectd的<tr>的<td>孩子正在上空盤旋，例如：

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