Javascript 鼠标悬停CSS位置绝对div显示在另一个TD上

我正在使用HTML表格。我的目标很简单。当鼠标悬停在open div open时，我正在尝试制作菜单。但在这个表中

当我将鼠标悬停在

电话上时：

元素尽快位于元素下方

..

右侧可见

元素（使用z索引）作为位置

绝对值

看法

HTML:

电话：







我的仪表盘
我的仪表盘
我的仪表盘
我的仪表盘

555 77 854

使用CSS，jquery

---

您可以单独在CSS中使用

：hover

和同级选择器执行此操作：

表格范围：悬停+辅助菜单{
显示：块；
}

---

您可以单独在CSS中使用

：hover

和同级选择器执行此操作：

表格范围：悬停+辅助菜单{
显示：块；
}

---

当跨度悬停时，您可以使用同级选择器更改

辅助菜单的
显示

span:hover+.secondary_menu {
  display: block;
}

以下是示例
当跨度悬停时，您可以使用同级选择器更改
辅助菜单的
显示

span:hover+.secondary_menu {
  display: block;
}

以下是示例
根据您的演示要求检查以下代码


$（“.maincontent”）.hover（函数（）{
$（'.secondary_menu'）.addClass（“.active”）；
}，函数（）{
$（'.secondary_menu'）.removeClass（“.active”）；
});
表格，
tr td：最后一个孩子{
位置：相对位置；
}
td>div{
位置：绝对位置；
不透明度：0；
过渡：不透明度0.5s；
}
tr：悬停td>div{
不透明度：1；
}
tbody tr td:第一个孩子：之前{
内容：''；
显示：块；
背景：rgba（0,0,0,0）；
过渡：背景0.5s；
}
t车身tr:悬停td:第一个孩子：之前{
背景：rgba（0,0,0,0.6）；
}
td>div>a{
背景：#1DE9B6；
颜色：#FFF；
文字装饰：无；
边界半径：2px；
填充：3倍；
过渡：颜色0.5s，背景0.5s；
左边距：10px；
}
/*不重要——只是个例子*/
td>div>a：悬停{
背景：#A7FFEB；
颜色：#000；
}
桌子{
边界塌陷：塌陷；
边框：实心1px#EEE；
}
th，
运输署{
边框：实心1px#EEE；
过渡：背景0.5s；
}
tr:n个孩子（偶数）{
背景：#E3F2FD；
}
表tr td{
宽度：50%；
}
.secondary_菜单li{
宽度：300px；
列表样式类型：无；
}
.辅助菜单{
显示：无；
宽度：70px；
}
.main内容：悬停。辅助菜单{
显示：块！重要；
宽度：70px；
}
.主要内容{
填充物：5px；
光标：指针；
}
.active{显示：阻止！重要；}

电话：

我的仪表盘
我的仪表盘
我的仪表盘
我的仪表盘

电话：

我的仪表盘
我的仪表盘
我的仪表盘
我的仪表盘

根据您要求的演示，检查以下代码


$（“.maincontent”）.hover（函数（）{
$（'.secondary_menu'）.addClass（“.active”）；
}，函数（）{
$（'.secondary_menu'）.removeClass（“.active”）；
});
表格，
tr td：最后一个孩子{
位置：相对位置；
}
td>div{
位置：绝对位置；
不透明度：0；
过渡：不透明度0.5s；
}
tr：悬停td>div{
不透明度：1；
}
tbody tr td:第一个孩子：之前{
内容：''；
显示：块；
背景：rgba（0,0,0,0）；
过渡：背景0.5s；
}
t车身tr:悬停td:第一个孩子：之前{
背景：rgba（0,0,0,0.6）；
}
td>div>a{
背景：#1DE9B6；
颜色：#FFF；
文字装饰：无；
边界半径：2px；
填充：3倍；
过渡：颜色0.5s，背景0.5s；
左边距：10px；
}
/*不重要——只是个例子*/
td>div>a：悬停{
背景：#A7FFEB；
颜色：#000；
}
桌子{
边界塌陷：塌陷；
边框：实心1px#EEE；
}
th，
运输署{
边框：实心1px#EEE；
过渡：背景0.5s；
}
tr:n个孩子（偶数）{
背景：#E3F2FD；
}
表tr td{
宽度：50%；
}
.secondary_菜单li{
宽度：300px；
列表样式类型：无；
}
.辅助菜单{
显示：无；
宽度：70px；
}
.main内容：悬停。辅助菜单{
显示：块！重要；
宽度：70px；
}
.主要内容{
填充物：5px；
光标：指针；
}
.active{显示：阻止！重要；}

电话：

我的仪表盘
我的仪表盘
我的仪表盘
我的仪表盘

电话：

我的仪表盘
我的仪表盘
我的仪表盘
我的仪表盘

请重新表述这个问题，你的问题还不够清楚。嘿@l0lander，你为什么不明白。我写得很清楚，但我还是强调了重要的单词。感谢图像本身不清楚。您好，@LekzFlores
div
元素作为display none存在于第一个
中。但当鼠标悬停在顶层右侧可见的telephone
div
元素上时（我想我们这里使用的是绝对位置和z-index）。但我没有存档。请重新表述问题，你问的问题还不够清楚。嘿@l0lander，你为什么不明白。我写得很清楚，但我还是强调了重要的单词。感谢图像本身不清楚。您好，@LekzFlores
div
元素存在于first