CODEWITHSUNDEEP
htmlcsscss-tables
tamilselvancst
tamilselvancst

Reputation: 488

Why table tr hover effect doesn't work?

Can anyone suggest about the table hover effect? See the image:

enter image description here

When I hover tr, this image style that blue border needed. How to get this output?

https://jsfiddle.net/tamilselvancst/s9umr8fz/3/

Upvotes: 0

Views: 1796

Answers (2)

Samudrala Ramu
Samudrala Ramu

Reputation: 2106

table tr:hover{
background:red;
}
.img-table tr:hover{
 background-image: url(http://img.mynet.com/ha2/tayyip.jpg);
}
<table style="width:100%">
  <tr height="100">
  <td>TEXT</td>
  <td>TEXT</td>
  <td>TEXT</td>
  <td>TEXT</td>
  <td>TEXT</td>
  </tr>
 </table> 
<table style="width:100%" class="img-table">
  <tr height="100">
  <td>TEXT</td>
  <td>TEXT</td>
  <td>TEXT</td>
  <td>TEXT</td>
  <td>TEXT</td>
  </tr>
 </table>

I'll Give You Two Examples Try This......

Upvotes: 0

Arathi Sreekumar
Arathi Sreekumar

Reputation: 2574

This should work:

tr:hover td {
   border: 1px solid #2795ee;
   background-color: #8eb2d2;
}

Here is your updated fiddle:

https://jsfiddle.net/s9umr8fz/4/

You can also give, or a combination if you only need bottom border:

tr:hover {
   background-color: #8eb2d2;
}
tr:hover td {
   border-bottom: 1px solid #2795ee;
}

The point to note is border does not work on a tr. Hence it will have to be given to the td element instead.

You can give the blue as required or any other colour for that matter. These colour codes may not be what you want.

Upvotes: 2

Related Questions