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>