0

这学期我在上一门网络简介课，我最重要的是我必须做的事情，所以没有什么能阻止我学习我想使用的东西。我在第一行设置了一个包含类别的表格，接下来的几行是数字，就像 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;
}
4

2 回答 2

0

我看不到如何使用 CSS 来完成此操作。这是一个jQuery 的小提琴。

片段

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 只能在元素已经加载时调用它。那么，我们想要做的是在整个文档（以及我们需要的元素）被加载时执行我们的代码片段。我们可以通过将上述代码放入 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");
        });
    });
});

请记住将此代码段放在<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>

希望这可以帮助。

于 2013-04-10T19:14:14.433 回答
0

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

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

});
于 2014-05-16T23:37:16.650 回答