javascript - 调整悬停时内容的垂直对齐方式

标签 javascript jquery css

我在这里有一个有趣的问题:

有一个带有少数单元的表,其中一些具有rowspans:

+----+----+----+----+
|    |    | c4 | cx |
|    | c2 +----+----+
|    |    | c5 | cx |
| c1 +----+----+----+
|    |    | c6 | cx |
|    | c3 +----+----+
|    |    | c7 | cx |
+----+----+---------+

当我将鼠标悬停在一行上(比如说第一行)时,我想将其显示为如下所示

+----+----+----+----+
| c1 | c2 | c4 | cx |
|    |    +----+----+
|    |    | c5 | cx |
|    +----+----+----+
|    |    | c6 | cx |
|    | c3 +----+----+
|    |    | c7 | cx |
+----+----+---------+

基本上,rowspan单元的值与突出显示的行出现在同一行上。

这是一个JSFIDDLE,具有突出显示的工作: https://jsfiddle.net/ucarL9e9/1/

因此,每当我突出一行时,我都想暂时更改单元格的垂直对准,以使其与突出显示的行相对。所以像这样:

enter image description here

我不担心单元格的颜色。

编辑

我在这里有一些工作,但只希望Rowspan在其跨度范围内

http://jsfiddle.net/jbb3f8yf/5/

所以当我突出显示上一个示例中的最后一行时应该是这样的

+----+----+----+----+
|    |    | c4 | cx |
|    | c2 +----+----+
|    |    | c5 | cx |
|    +----+----+----+
|    |    | c6 | cx |
|    |    +----+----+
| c1 | c3 | c7 | cx |
+----+----+---------+

最佳答案

您可以使用 JQuery 来完成此操作

<强> DEMO

JS

$('tr > td').each(function() {
  var top = $(this).offset().top;

  if($(this).is('[rowspan]')) {
    $(this).html('<span>Long Text</span>');
  }

  $(this).hover(function() {
    $('td[rowspan="45"] span').css('top', top);
    $('td[rowspan="45"]').css('background', '#ffff99');
  }, function() {
    $('td[rowspan="45"] span').css('top', 0);
    $('td[rowspan="45"]').css('background', '#b8d1f3');
  });
});

CSS

td[rowspan="45"] {
  position: relative;
}

td[rowspan="45"] span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

关于javascript - 调整悬停时内容的垂直对齐方式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34137888/

相关文章:

css - 对新手的一些帮助

java - 如何在 javafx 中正确缩放控件和布局

Javascript ES6 类组成

javascript - 找不到数组逆向算法问题的解决方案

javascript - 需要重构这个JS,不知道从哪里开始

javascript - jQuery 动画在滚动时延迟

javascript - Avada wordpress 网站的简单 CSS 或 JavaScript 加载屏幕,同时加载一个大型视频文件,该文件在页面加载完成后消失

php - 如何单击图像的某些部分

javascript - 在 html 复选框后面运行一个 Action

css - 背景调整到浏览器,不固定