如何移除表中列的悬停效果

Question

我是新来的，这是我在这个领域的第一个问题。

我用HTML，CSS制作了一个表格。这是表格：http://abidhasan.zxq.net/table/table-others.html

如果我们将鼠标停留在一行上，将会在该行上发生悬停效果。甚至，如果我们将鼠标放在图标/价格上，价格的文本和第一列的文本将是粗体的，这样它就可以很容易地理解哪一行的哪一列，实际上我把鼠标放在了：https://www.dropbox.com/s/q8acafxu3yhefj0/table.png

百事大吉。但是，我遇到了一个问题。

(1)如果我将鼠标放在第二行，最后一列也会得到悬停效果。但是，我不想这样。我想，如果我把鼠标放在第二行，最后一列就不会悬停。

(2)当我把鼠标放在最后一列时，它会得到悬停效果，很好。但是，同时，第二行也获得了悬停效果。我也不想要这个。我希望，当我将鼠标放在最后一列时，只有最后一列会获得悬停效果，其他行/列都不会获得悬停效果，我该怎么做呢？

我的表的结构：

<table class = "table-4">
  <tr>
      <th>Tapered Triangle</th>
      <th>Diameter 8'</th>
      <th>Diameter 10'</th>
      <th>Diameter 12'</th>
      <th>Diameter 14'</th>
      <th>Diameter 15'</th>
      <th>Diameter 16'</th>
   </tr>
   <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>      
      <td></td>
      <td></td>
      <td rowspan = "5"></td>
   </tr>
   <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
   </tr>
   <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
   </tr>
   <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
   </tr>
   <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
   </tr>
</table>

主要是，我在第二行遇到了问题：

<tr>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>      
   <td></td>
   <td></td>
   <td rowspan = "5"></td>
</tr>

第二行的最后一列

<td rowspan = "5"></td>

如果可能，请尝试通过CSS给出解决方案。如果这是不可能的CSS和您提供的解决方案与Javascript/jQuery，请告诉我细节，因为我不是专家在Javascript/jQuery。如果您提供与CSS3解决方案，也请告诉我如何满足跨浏览器兼容性的要求。我真的是新来的。所以，请原谅我的任何错误。感谢大家看到我的问题。

Answer 1

我在css和jquery中做了一些小技巧，如下所示。

CSS部件:

<style type="text/css">
.new-child {
background:none !important;
}
.born-child {
background:#d0dafd !important;
}
</style>

jQuery部件:

<script type="text/javascript">
$(document).ready(function() {

$(".table-4 tr:eq(1)").hover(function(){
$(".table-4 tr:eq(1)").find('td[rowspan]').addClass("new-child");
});

$(".table-4 tr:eq(1) td[rowspan]").hover(function(){ 
$(".table-4 tr:eq(1) td").addClass("new-child");  
$(".table-4 tr:eq(1) td[rowspan]").removeClass("new-child");
$(".table-4 tr:eq(1) td[rowspan]").addClass("born-child");
},
function () {
$(".table-4 tr:eq(1) td").removeClass("new-child");
$(".table-4 tr:eq(1) td[rowspan]").removeClass("born-child");
}
);

});
</script>

要查看它的实际效果：http://jsfiddle.net/john_rock/emtpb/

我认为这可能会帮助你解决你的问题。

Answer 2

答案很简单，只需在每行上有说明即可。很抱歉答案很简单，但是rowspan会给你带来很多greif。