3

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

我已经使用 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 给出解决方案，请告诉我如何满足跨浏览器兼容性的需求。我在这里真的很新。所以，请原谅我的任何错误。感谢大家看到我的问题。

4

3 回答 3

1

style.css在第 52 行附近删除这个 css

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

你用过:hover

:hover=> 最初由 Microsoft 发明，a:hover 伪类立即大受欢迎。它允许您定义鼠标悬停在元素上的样式。

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

好读

  1. MDN：:hover

发表评论后编辑

你想要的效果可以通过 little jquery(javascript) try

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

jsFiddle

于 2012-12-12T04:39:54.497 回答
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/

我认为这可以帮助您解决问题。

于 2012-12-12T07:47:37.673 回答
0

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

于 2012-12-12T04:46:21.933 回答