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

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 => 最初由微软发明，a:hover 伪类一炮而红。它允许您定义鼠标悬停的元素的样式。

---

注意：在触摸屏上：悬停是有问题或不可能的

好读

1. MDN : :hover

---

编辑 在您发表评论后

一点jquery(javascript)试试就可以达到你想要的效果

删除.table-2 and 3 and 4 tr:hover tdcss

并添加小 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');
})

Answer 2

我在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 3

简单的答案，每行都有说明。很抱歉回答简单，但行跨度会让你大吃一惊。