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删除到第{52行附近的style.css

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

您使用过:hover

:hover =＆gt;最初是由微软发明的，a：hover pseudoclass立即受到欢迎。它允许您定义鼠标悬停在元素上的元素的样式。

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

好读

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'); })

<子> <子> <子>

Answer 2

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

CSS部分：

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

jQuery Part：

<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

简单的回答，只需在每一行上有说明。对不起，简单的回答，但rowspan会告诉你很多greif。

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

3 个答案: