Javascript 下拉按钮列表。Onmousover右侧显示按钮说明

我有一个按钮列表和带有下拉菜单的按钮。
当我将鼠标放在每个按钮上时，列表底部会显示该按钮的简要说明（参见示例）

现在它仅适用于第一级按钮，而不适用于下拉列表项

总之，我想：

显示列表右侧每个项目的说明（

onmouseover

），如图所示（与现在不同，不在底部）

不仅为第一级按钮而且为下拉列表中的项目显示说明（

onmouseover

）

我将非常感谢有一个有效的解决办法

.element-1，
.要素2，
.要素-3{
显示：无；
}
.a-1：悬停~.element-1{
显示：块；
}
.a-2：悬停~.element-2{
显示：块；
}
.a-3：悬停~.element-3{
显示：块；
}

下拉按钮列表

按钮1
下拉按钮1






下拉按钮3












按钮4按钮5和160     

按钮1说明
按钮4说明
按钮5说明

我已将描述元素移到按钮的正后方。
然后，我添加了类

description

，以便轻松地针对所有description

div

s，
另一个是descripted，它可以轻松地针对所有带有描述的按钮

添加一些CSS，然后开始：

.container{
/*增加了可视性*/
背景：#eee；
}
.说明{
显示：无；
/*绝对定位指的是容器*/
位置：绝对位置；
转换：翻译（100%，-100%）；
}
.descripted:悬停+.description{
显示：块；
}

下拉按钮列表

按钮1

按钮1说明
下拉按钮1

下拉列表1说明




下拉列表项目1说明



下拉项目2说明

下拉按钮3












按钮4按钮5和160     

我已将描述元素移到按钮的正后方。
然后，我添加了类

description

，以便轻松地针对所有description

div

s，
另一个是descripted，它可以轻松地针对所有带有描述的按钮

添加一些CSS，然后开始：

.container{
/*增加了可视性*/
背景：#eee；
}
.说明{
显示：无；
/*绝对定位指的是容器*/
位置：绝对位置；
转换：翻译（100%，-100%）；
}
.descripted:悬停+.description{
显示：块；
}

下拉按钮列表

按钮1

按钮1说明
下拉按钮1

下拉列表1说明




下拉列表项目1说明



下拉项目2说明

下拉按钮3












按钮4按钮5和160     

为什么不使用“title”属性在下拉按钮上显示说明？我不使用title，因为它只显示很小的“alt”文本，并且无法添加图像（如按钮1）为什么不使用“title”属性在下拉按钮上显示说明？我不使用title，因为它只显示很小的“alt”文本和