Question

本学期我正在参加网络课程的介绍，我最重要的是我必须做的事情，所以没有什么能阻止我学习我想要使用的东西。我在第一行设置了一个包含类别的表，后面的行是数字，设置类似于Jeopardy游戏。当我滚动一列时，我希望整列都突出显示，依此类推以下列。我的问题是，当我将鼠标悬停在我的列上时会突出显示该列，但是当我深入到该列中的每个特定单元格时，它们会逐渐不亮。我只是想让他们保持高亮！我在CSS工作，我以前从未使用过Jquery，只有一点点Javascript，但我愿意接收所有信息。如果可能的话，最好是CSS。

CSS

td:hover{
    background-color: 5a5b93;
}

td {
    position: relative;
}

td:hover::after {
    background-color: #563A81;
    content: '\00a0';
    height: 10000px;
    left: 0;
    position:absolute;
    width: 100%;
    z-index: -1;
}

Answer 1

我没有看到如何使用CSS完成此操作。这是带有jQuery的fiddle。

段

var th = $("th, td");

th.each(function() {
    var $this = $(this),
        n = $this.index() + 1;
    $this.hover(function() {
        var col = $("tr > td:nth-child(" + n + ")");
        col.addClass("hovered");
    });
});

USAGE

jQuery是一个Javascript库。这意味着它需要源代码。在执行jQuery脚本之前需要加载库本身，因为默认情况下浏览器不“知道”jQuery。您可以通过在文档中添加脚本来完成此操作。您的样式表（ *.css ） <script> 之前 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

$(document).ready(function () { var th = $("th, td"); th.each(function () { var $this = $(this), n = $this.index() + 1; $this.hover(function () { var col = $("tr > td:nth-child(" + n + ")"); col.addClass("hovered"); }); }); });

现在已经解决了，我们可以将上面的代码添加到我们的文档中。要小心！ JavaScript只能在已加载元素时调用它。那么，我们想要做的是在加载整个文档（以及我们需要的元素）时执行我们的代码片段。我们可以通过将上面的代码放入doc-ready函数来实现这一点：

<script>

请记住将此代码段放在<head>  <link href="/stylesheet.css" rel="stylesheet" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(document).ready(function () { var th = $("th, td"); th.each(function () { var $this = $(this), n = $this.index() + 1; $this.hover(function () { var col = $("tr > td:nth-child(" + n + ")"); col.addClass("hovered"); }); }); }); </script> </head> - 标记中，放在 jQuery库之后。

您的文档的“头部”看起来像这样（按此顺序）：

{{1}}

希望这有帮助。

Answer 2

我认为你需要一些jquery ......这里有一个关于列突出显示http://css-tricks.com/row-and-column-highlighting/的好教程，这里有一个jsfiddle，其中有一个关于tut要点的工作示例。

<强> HTML

<table>  
<colgroup></colgroup>
<colgroup class="slim"></colgroup>
<colgroup class="slim"></colgroup>
<colgroup class="slim"></colgroup>
<colgroup class="slim"></colgroup>   
<thead>
      <tr>
           <th></th>
           <th></th>
           <th></th>
           <th></th>
           <th></th>
       </tr>
    </thead>       
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
   </tbody>

<强> CSS

* { margin: 0; padding: 0; }
body { font: 14px Georgia, serif; }

#page-wrap { width: 600px; margin: 0 auto; }

table { border-collapse: collapse; width: 100%; }
td, th { border: 1px solid #ccc; padding: 10px; }

.slim { width: 88px; }
.hover { background-color: #eee; }

<强> JS

$(function() {

  $("table").delegate('td','mouseover mouseleave', function(e) {
    if (e.type == 'mouseover') {
      $(this).parent().addClass("hover");
      $("colgroup").eq($(this).index()).addClass("hover");
    } else {
      $(this).parent().removeClass("hover");
      $("colgroup").eq($(this).index()).removeClass("hover");
    }
  });

});

将鼠标悬停在列上时如何保持列突出显示？

2 个答案:

段

USAGE