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

【问题标题】：How do I keep a column highlighted when hovering over it?将鼠标悬停在某列上时如何保持该列突出显示？
【发布时间】：2013-04-02 18:28:54
【问题描述】：

本学期我正在参加 Web 入门课程，我首先要做的就是完成所有我必须做的事情，所以没有什么能阻止我学习我想使用的东西。我在第一行设置了一个包含类别的表格，接下来的几行是数字，就像 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;
}

【问题讨论】：

转到 jsfiddle.net 并发布一些示例 CSS 和 HTML，以便我们了解您在做什么。

标签： css hover dreamweaver highlight css-tables

【解决方案1】：

我认为你需要一些 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; }

$(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");
    }
  });

});

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会失效。
编辑了我的答案：从 tut 中添加了一些代码并制作了一个小提琴来玩这些代码。

【解决方案2】：

我看不到如何使用 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");
    });
});

用法

jQuery 是一个 Javascript 库。这意味着它需要源代码。在执行 jQuery 脚本之前，需要加载库本身，因为默认情况下浏览器不“知道”jQuery。您可以通过在文档中添加脚本来做到这一点。最好在您的样式表 (*.css) 和在其他 <script> 的样式表之前。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

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

$(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");
        });
    });
});

记得把这个 sn-p 放在 <script>-tags 和 jQuery 库之后。

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

<head>
<!-- Bunch of meta tags -->
<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>

希望这会有所帮助。

【讨论】：

我应该将它添加到我的代码中，还是删除我在那里发布的内容 ^^ 以及我应该将这段代码放在我的 HTML 中的什么位置？我从来没有做过 jQuery，所以我只是有点不熟悉如何处理它。
我应该摆脱我原来拥有的代码并将其放入吗？
我试着把它放进去，但它不起作用。我不知道。哇，这就加重了。哈哈。
@Leah 不，您不应该将原始代码放入其中。尝试使用浏览器的开发工具 (F12) 并查看 console。你得到了哪些错误？