CODEWITHSUNDEEP
javascriptjquerycss
vijay
vijay

Reputation: 306

td background-color not change when i hover it

this is my code.i'm hover first tr in table previous class background colors will not change in first two td in first tr.but only when i'll hover first tr must change 1st two td background color will change,where i'm missing some code.it's possible only in 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>

Upvotes: 1

Views: 104

Answers (3)

Renjith Kathirolil
Renjith Kathirolil

Reputation: 91

Try to change the style:

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

Upvotes: 0

Ken Bellows
Ken Bellows

Reputation: 6930

The problem is that you've specified background colors for your <td> tags in your .cls block. When you change the <tr>'s background color on hover the <td>s don't lose their own styles, and they'll always be sitting "on top" of the <tr>'s background, so to speak. To fix this, specifically selectd the <td> children of the <tr> being hovered over, e.g.:

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

Upvotes: 1

code.rider
code.rider

Reputation: 1897

use like this

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

Upvotes: 1

Related Questions