Fatal编程技术网
  • javascript/
  • Javascript 悬停显示多行多列元素的表格

Javascript 悬停显示多行多列元素的表格

javascript html css

Javascript 悬停显示多行多列元素的表格,javascript,html,css,html-table,Javascript,Html,Css,Html Table,我试图在悬停状态下显示行和列中元素的表。 注意：行和列中的数据也是一致的。 数据分为4列，可以是任意数量的行。 悬停显示的每个表的数据包含5列，可以是任意数量的行 我编写了以下CSS/HTML，在手风琴打开时显示所有4列数据（即骑师姓名和骑乘次数）。 注意：这些元素中的每一个都将有一个关联的表显示在鼠标悬停时 正如您将看到的，我设法在第一行中显示悬停时每个元素的关联表，但是，在其余行和列中，我无法对任何后续元素执行相同的操作 注意：出于测试目的，我特意在悬停时将每个元素的高亮显示保留为“红色”

我试图在悬停状态下显示行和列中元素的表。 注意：行和列中的数据也是一致的。 数据分为4列，可以是任意数量的行。 悬停显示的每个表的数据包含5列，可以是任意数量的行

我编写了以下CSS/HTML，在手风琴打开时显示所有4列数据（即骑师姓名和骑乘次数）。 注意：这些元素中的每一个都将有一个关联的表显示在鼠标悬停时

正如您将看到的，我设法在第一行中显示悬停时每个元素的关联表，但是，在其余行和列中，我无法对任何后续元素执行相同的操作

注意：出于测试目的，我特意在悬停时将每个元素的高亮显示保留为“红色”

var acc=document.getElementsByClassName（“accordion”）；
var i；
对于（i=0；i
手风琴{ 背景色：#388070； 边界：1px； 边框底部：10px； 边框颜色：#f0； 边界半径：3px； 边框样式：实心； 边框宽度：2倍； 颜色：#ffffff； 光标：指针； 字体大小：12px； 字体大小：400； 线高：1.2； 字母间距：2px； 填充：12px； 大纲：无； 文本对齐：左对齐； 过渡：0.4s； 宽度：100%； 保证金：自动！重要； } .主动， .手风琴：悬停{ 背景色：透明； 边界：1px； 边框颜色：#388070； 边框样式：实心； 边框宽度：2倍； 颜色：#388070； } .手风琴{ 内容：“\002B”； /*加号（+）的Unicode字符*/ 颜色：#388070； 字体大小：12px； 浮动：对； 左边距：5px； } .活动：之后{ 颜色：#388070； 内容：“\2212”； /*“减号（-）的Unicode字符*/ } .专题小组5{ 边界：1px； 边框底部：10px； 边框颜色：#f0； 边框样式：实心； 边框宽度：2倍； 垫面：5px； 右侧填充：5px； 垫底：5px； 左侧填充：25px； 显示：无； 背景色：白色； 溢出：隐藏； } .栏目{ 浮动：左； 宽度：25%； 字号：7pt； 颜色：黑色； 字体系列：Lato； 字体大小：正常； 线高：1.2； 背景色：白色； 柱间距：3px； } myrow先生{ 浮动：左； 宽度：100%； 字号：7pt； 颜色：黑色； 字体系列：Lato； 字体大小：正常； 线高：1.2； 背景色：白色； } myrow：之后{ 内容：“； 显示：表格； 明确：两者皆有； } 答：林克， a:参观了{ 背景色：透明； 颜色：#07342a； 显示：内联块； 字体系列：“Lato”，无衬线； 字体大小：12px； 文本对齐：居中； 文字装饰：无； } a:悬停， a:主动的{ 背景色：透明； 颜色：303030； 字体大小：粗体； } #骑师{ 边界塌陷：塌陷； 显示：无； 字体系列：“Lato”，无衬线； 字体大小：12px； 宽度：100%； } #骑师运输署， #骑师{ 边框：1px实心#dddddd； 填充：8px； } #骑师{ 背景色：#07342a； 颜色：白色； 字体系列：“Lato”，无衬线； 字体大小：12px； 字母间距：1px； 填充顶部：12px； 垫底：12px； 文本对齐：左对齐； } #骑师tr：第n个孩子（偶数）{ 背景色：#F2F2； } #ShowJockey:hover+#骑师{ 显示：块； } 分区悬停弹出窗口{ 边界塌陷：塌陷； 显示：无； 字体系列：“Lato”，无衬线； 字体大小：9px； 文本对齐：居中； } 运输署署长， 第四分区{ 边框：1px实心#dddddd； 填充物：5px； } 第四分区{ 背景色：#07342a； 颜色：白色； 字体系列：“Lato”，无衬线； 字体大小：9px； 字体大小：粗体； 字母间距：1px； 垫面：5px； 垫底：5px； 文本对齐：居中； } a、 悬停河豚{ 背景色：白色； 颜色：#07342a； 字体系列：“Lato”，无衬线； 字体大小：12px； 字母间距：1px； 线高：1.2； 边缘顶部：1米； 填充顶部：10px； 文本对齐：左对齐； } a:悬停， a:主动的{ 背景色：透明； 颜色：红色； 字体大小：粗体； } a、 hoverHereToPopUp:hover+div.hoverPopUp{ 显示：块； } 表格中心{ 左边距：自动； 右边距：自动； 边界间距：1； } 
每位骑师的骑乘次数（不包括擦伤）
  • 一个id在一个页面上不能使用多次。所以我用
    类
    替换了它们。（
    #jockeys
    ->
    .jockeys
    ，
    #ShowJockey
    ->
    .ShowJockey
    ）

  • 不能将
    div
    放入
    p
    标记中。因此，我们必须替换
    p