为什么table tr悬停效果不起作用？

Question

有人可以建议table悬停效果吗？见图：

当我悬停tr时，此图像样式需要蓝色边框。如何获得此输出？

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

Answer 1

这应该有效：

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

这是你更新的小提琴：

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

如果您只需要底部边框，您也可以给予或组合：

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

值得注意的是边框不适用于tr。因此，必须将它赋予td元素。

您可以根据需要提供蓝色或任何其他颜色。这些颜色代码可能不是您想要的。

Answer 2

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> 

我会给你两个例子试试这个......