CSS实现hover触发其他类元素显示：计算器三角函数菜单需求

你可以通过CSS的相邻兄弟选择器来实现这个需求，不需要额外的JavaScript。以下是修改后的完整代码和步骤说明：

调整后的CSS代码 #

.above-numbers{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    cursor: pointer;
    justify-content: space-between;
}

.above-numbers div{
    border: none;
    color: white;
    background-color: #282a2d;
    cursor: pointer;
    /* 统一添加内边距，让按钮更美观 */
    padding: 8px;
    text-align: center;
}

/* 默认隐藏三角函数菜单 */
.tr-menu {
    display: none;
    /* 让菜单和show-more按钮对齐在同一列 */
    grid-column: 5;
    /* 内部垂直排列选项 */
    grid-template-columns: 1fr;
    gap: 4px; /* 选项之间的间距 */
    padding: 4px;
}

/* 悬停show-more时显示菜单 */
.show-more:hover + .tr-menu {
    display: grid;
}

关键步骤说明 #

1. 默认隐藏菜单：给.tr-menu设置display: none;，确保页面加载时菜单不显示。
2. 相邻兄弟选择器控制显示：使用show-more:hover + .tr-menu选择器，当鼠标悬停在.show-more元素上时，选中紧随其后的.tr-menu，并将其display改为grid实现显示。
3. 布局对齐优化：添加grid-column: 5;让菜单和show-more按钮处于网格的同一列，避免布局错位；同时给菜单内部设置单列网格，让三角函数选项垂直排列。

可选优化（提升交互体验） #

如果希望鼠标离开show-more但停留在菜单上时，菜单依然保持显示，可以调整HTML结构，将.tr-menu放到.show-more内部，然后修改CSS为：

.show-more {
    position: relative;
}

.tr-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #282a2d;
    color: white;
    padding: 4px;
    grid-template-columns: 1fr;
    gap: 4px;
}

.show-more:hover .tr-menu {
    display: grid;
}

对应的HTML修改为：

<div class="show-more">
    V
    <div class="tr-menu">
        <div>sin</div>
        <div>cos</div>
        <div>tan</div>
        <div>cot</div>
        <div>cosec</div>
        <div>sec</div>
    </div>
</div>

这种方式能避免鼠标快速移动时菜单意外消失，让交互更流畅。

内容的提问来源于stack exchange，提问作者emirhan demir