javascript - 悬停在表格中以影响标题-6ren

javascript - 悬停在表格中以影响标题

转载作者：太空宇宙更新时间：2023-11-03 20:32:01

25

4

我不确定在没有 JavaScript 的情况下这是否有可能实现，但它会更可取。

这是我的页面的样子:

 ____________________________
| TITLE                      |     |This is a fixed header. I want "TITLE"
|----------------------------|     |to be the name of the row, and I want it
|   _______    _______    ___|     |to show when I hover over one of the 
|  |       |  |       |  |   |     |image rows.
|  |       |  |       |  |   |     |
|  |_______|  |_______|  |___|     | [The boxes are the images.]
|   _______    _______    ___|     |
|__|_______|__|_______|__|___|     |

header {
  background: #FFFFFF;
  position: fixed !important;
  width: 100%;
  height: 85px;
  top: 0;
  left: 0;
  text-align: left;
  font-size: 30px;
  border: 1px solid black;
}

body {
  padding-top: 100px;
  /*equal to the height of your header */
}

r1n {
  width: 200px;
  height: 200px;
  display: inline;
}

r1n:hover {
  display: none
}

table tr:hover ~ header r1n {
  display: none
}

<header>

  <r1n>TITLE_NAME</r1n>
</header>

<body>
  <table>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>d</td>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>d</td>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>d</td>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>d</td>
    </tr>
  </table>
</body>

是否有 CSS 方法/技巧使固定标题显示行的名称？也许通过在标题中隐藏一堆 div 并根据光标所在的行显示它们？

编辑:

@AndrewBone:CSS 和 JS 解决方案

@Dekel:JS解决方案

编辑^2:只是...只是看看所有的答案。他们都很好。 CSS/JS/JQ.

最佳答案

我看到很多人说这是不可能的，尽管我绝不会建议您在实践中使用它。

这是一个例子:

body {
  margin: 0;
}
table {
  margin: 18px 0 0 0;
  position: relative;
  border: 1px solid black;
}
tr:nth-child(even) {
  background: #DDD;
}
tr:nth-child(odd) {
  background: #FFF;
}
tr:hover {
  background: tomato;
}
tr[data-header]:hover:after {
  content: attr(data-header);
  position: absolute;
  top: -19px;
  left: -1px;
  border: 1px solid black;
  border-bottom-width: 0px;
  width: 100%;
}
td {
  padding: 5px 15px;
}

<table>
  <tr data-header="Header 1">
    <td>a</td>
    <td>b</td>
    <td>c</td>
    <td>d</td>
  </tr>
  <tr data-header="Header 2">
    <td>a</td>
    <td>b</td>
    <td>c</td>
    <td>d</td>
  </tr>
  <tr data-header="Header 3">
    <td>a</td>
    <td>b</td>
    <td>c</td>
    <td>d</td>
  </tr>
  <tr data-header="Header 4">
    <td>a</td>
    <td>b</td>
    <td>c</td>
    <td>d</td>
  </tr>
</table>

我为每个 tr 添加了一个 header 属性我还添加了一个伪元素，这个伪元素放置了一些 content，在这个例子中它是从 header 属性中获取的 attr(header)，并将它定位在我们希望它相对于父级 table 的位置，就像我们有一些有效的代码并且是免费的 JS 一样。但老实说，如果可以的话，请使用 JS :-)

希望这对您有所帮助。

编辑:

这是一个纯javascript的解决方案

const trSel = document.querySelectorAll("tr[data-header]");
for (let i = 0; i < trSel.length; i++) {
  trSel[i].addEventListener("mouseover", function(evt) {
    let headSel = trSel[i].parentElement.parentElement.parentElement.querySelector(":scope > .header");
    headSel.innerHTML = trSel[i].dataset.header;
  });
}

body {
  margin: 0;
}
.header {
  padding: 5px 0;
}
tr:nth-child(even) {
  background: #DDD;
}
tr:nth-child(odd) {
  background: #FFF;
}
tr[data-header]:hover {
  background: tomato;
}
td {
  padding: 5px 15px;
}

<div>
  <div class="header">
    Placeholder!
  </div>
  <table>
    <tr data-header="Table 1 Row 1">
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>d</td>
    </tr>
    <tr data-header="Table 1 Row 2">
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>d</td>
    </tr>
    <tr data-header="Table 1 Row 3">
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>d</td>
    </tr>
    <tr data-header="Table 1 Row 4">
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>d</td>
    </tr>
  </table>
</div>

<h2>
Wild second table appeared
</h2>

<div>
  <div class="header">
    Placeholder!
  </div>
  <table>
    <tr data-header="Table 2 Row 1">
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>d</td>
    </tr>
    <tr data-header="Table 2 Row 2">
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>d</td>
    </tr>
    <tr data-header="Table 2 Row 3">
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>d</td>
    </tr>
    <tr data-header="Table 2 Row 4">
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>d</td>
    </tr>
  </table>
</div>

它使用相同的原理，但现在它实际上是在更新文本，因此当您将鼠标移开时，它可以保留最后选择的行。它也适用于多个表。

编辑 2: 稍作修改，我已更改为使用数据 header 而不是 header ，只是因为这就是您要做的 ;-)

关于javascript - 悬停在表格中以影响标题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40000277/

25

4

0

文章推荐： python - 在这种情况下如何重命名多个文件.jpg？

文章推荐： c# - 面板控件中的对齐按钮

文章推荐： matlab - MATLAB中N个函数句柄求和

html - 标题/标题
我附上了一个我尝试使用 html/css 实现的示例(如果您看不到图像:名字和姓氏，然后第二行是职位描述)。我希望所有文本(两行)在一个 div 中强制对齐(左和右)，但我不确定这是否可能。我尝试了一
html - Div 标题/标题
我想使两个 h1 元素成为 div 上的标题/页眉。所以每个都在特定的 div 之上。 Youtube Achievements
Android EditText 标题(标题)就像在 android 指南中
我想让每个 EditText 对象都有自己的标题，就像 Pure Android 指南中那样 (screenshot) 这个东西有原生支持吗？我想他们也可能会使用带有部分的 ListView ，但这对
swift - UICollectionView 标题 View 类似于表格 View 标题(不是节标题)
是否可以像 UITableView headerView 一样创建 UICollectionView 标题 View ？我的意思是整个集合 View 的标题 View ，而不是每个部分的重复 View
android - Material Design 排版 - 标题、标题、间距、文本外观
我一直在遵循有关排版的 Google 官方 Material 设计指南 (http://www.google.com/design/spec/style/typography.html)，但我发现它们
python - 是否有 Python 库来提取视频元数据，例如 [标题、描述、标题/字幕]？
我目前正在尝试找到可以帮助我从视频文件中提取元数据或信息的 python 库，例如 [ mp4, Mkv, Avi, WebM, mpg ] 格式为例。我主要从视频文件中提取的主要数据是 [标题、描
html - Bootstrap 缩略图 - 中心内容(img + 标题)，标题 float :left
你好，这是我正在尝试做的: 将每个缩略图的内容(img + 标题)居中。我的 img 必须是 span3，标题必须是 span4。这是我的问题: 我可以获取内容中心，或者标题 float 在 im
ios - UINavigationBar 后退按钮在某些设备或模拟器上显示 "Back"标题，在其他设备或模拟器上显示之前的 View Controller 标题
我有一个带有导航栏的应用程序，可以从一个 View Controller 导航到下一个 View Controller 。在某些模拟器和设备上导航到下一个 View Controller 时，后退按钮
sql - t-sql 这是如何工作的？ SELECT @MyList = ISNULL(@MyList ,'') + 标题 + ', ' FROM 标题
我遇到了一些非常酷的 t-sql，可以从一个 t-sql 查询中的选定行生成一个逗号分隔的列值列表: SELECT @MyList = ISNULL(@MyList,'') + Title + ',
HTML 标题
请确保将 HTML heading 标签只用于标题。不要仅仅是为了生成粗体或的文本而使用标题。搜索引擎使用标题为您的网页的结构和内容编制索引。因为用户可以通过标题来快速浏览您的网页，所以用标
每页上的 wkhtmltopdf 标题
我正在使用 wkhtmltopdf 将 html 转换为 pdf。我想在每个页面中添加标题，但它只显示在第一页(目录)中。我使用的命令是 "C:\Program Files\wkhtmltopdf
r - 如何在ggplot2中显示obs的方向(标题)
如何使用 ggplot2 显示观察的方向(标题)？有没有办法调整shape=17 (三角形)以便它“指向”下一次观察？示例代码 library(ggplot2) dat % pivot_wide
macos - 标题&&关闭按钮不显示
我尝试在 cocoa 应用程序中显示/隐藏标题栏。我使用以下代码: if ([window styleMask]==NSResizableWindowMask) { [wind
文本字段上的 JavaScript 标题
我有这样的 HTML 标题 http://s1.postimg.org/4ebyk3qwv/image.png 当我编写这段代码时: document.getElementById("TL85_1_
wordpress - 在Facebook上与视频共享URL不显示描述/标题
我叫麦克。谢谢你的帮助。在Wordpress中，我们已经设计了我们的网站，以便在Facebook调试器中og数据尽可能接近youtube。尽管如此，在Facebook上共享视频的方式还是不同的。尽管
scala - 返回确切的响应/标题？
从 web 应用程序的客户端，我点击了服务器端路由，它只是第三方 API 的包装器。使用分派(dispatch)，我试图让服务器端请求返回 exact header 和第三方 API 对客户端 AJA
scala - 返回确切的响应/标题？
从 web 应用程序的客户端，我点击了服务器端路由，它只是第三方 API 的包装器。使用分派(dispatch)，我试图让服务器端请求返回 exact header 和第三方 API 对客户端 AJA
SAPUI5 - 标题、侧边栏和导航
我是 SAPUI5 的新手，在导航、侧边栏和标题方面遇到一些问题。我想开发一个带有标题和侧边栏的应用程序。我为此使用“ToolPage”。每个页面都包含工具页，如下所示:
go - “标题”注释的目的
我最近在为客户做的项目中被介绍给Go。他们已经建立了代码库，需要进行一些更改。我注意到所有的方法，结构等等都有一些奇怪的类似于标题的注释，如下所示: // SomeType ... type Som
java - ListView 标题
我创建了一个采用整个屏幕布局的标题布局(xml 文件)... 我还创建了一个 listView 并将此 header_layout 添加到 listView 中: LayoutInflater inf

首页

博学

6Ren·AI

商城

javascript - 悬停在表格中以影响标题