文章/答案/技术大牛

发布

社区首页 >问答首页 >当我将它悬停时，背景颜色不会改变。

问当我将它悬停时，背景颜色不会改变。
EN

Stack Overflow用户

提问于 2016-03-08 12:13:22

回答 3查看 65关注 0票数 1

这是我的代码。我在表中先悬停第一个tr，前一个类的背景色不会在第一个tr.but中的前两个td中改变，当我首先要改变时，tr必须改变第一个，两个td的背景色会改变，这里我遗漏了一些代码。只有在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>

javascript

jquery

css

回答 3

Stack Overflow用户

回答已采纳

发布于 2016-03-08 12:20:03

像这样使用

.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

Stack Overflow用户

发布于 2016-03-08 12:20:39

问题是您已经在<td>块中为您的.cls标记指定了背景色。当您在悬停时更改<tr>的背景色时，<td>不会丢失他们自己的样式，可以说，他们总是坐在<tr>的背景的“顶部”。要解决这个问题，具体地选择了<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>

票数 1

Stack Overflow用户

发布于 2016-03-08 12:19:40

试着改变风格：

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/35867105

复制

相似问题

问当我将它悬停时，背景颜色不会改变。
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当我将它悬停时，背景颜色不会改变。EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当我将它悬停时，背景颜色不会改变。
EN