html - 如何从表格的列中删除悬停效果

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

在第 52 行附近的 style.css 中删除此 css

.table-4 tr:hover td {
    background: none repeat scroll 0 0 #D0DAFD;
    color: #000099;
}

你已经使用了:hover

:hover => Originally invented by Microsoft, the a:hover pseudoclass was an immediate hit. It allows you to define the styles of an element the mouse hovers over.

---

Note: on touch screens :hover is problematic or impossible

好读

1. MDN : :hover

---

编辑在你的评论之后

你想要的效果可以通过小jquery(javascript)试试来实现

移除 .table-2 and 3 and 4 tr:hover td css

并添加一些 jquery

var color = '';
$('td').hover(function(){

    $(this).css('background','none repeat scroll 0 0 #D0DAFD');
     $(this).css('color','#000099');
     $(this).parent().find('td:first').css('background','none repeat scroll 0 0 #D0DAFD');
     $(this).parent().find('td:first').css('color','#000099');


},function(){
    $(this).css('background',color);
     $(this).css('color','#666699');
     $(this).parent().find('td:first').css('background',color);
     $(this).parent().find('td:first').css('color','#666699');
})

<子><子><子>