CSS图片悬停多按钮显示：相邻兄弟选择器与通用兄弟选择器解析

function MainCard() {
    return (
        <div>
            <div className="mainCardObject">
                <ul>
                    <li>
                        <div className="cardObj">
                            <img src={HipHopCard} className="mainCardImage" alt="Hip Hop Music" />
                            <button className="playbutton">play</button>
                            <button className="addbutton">add</button>
                        </div>
                    </li>
                    {/* 更多卡片项... */}
                </ul>
            </div>
        </div>
    );
}

.playbutton, .addbutton {
    background-color: red; /* 示例颜色 */
    position: absolute;
    margin-top: 120px;
    margin-left: 10px; /* 初始位置 */
    display: none; /* 默认隐藏 */
}

.addbutton {
    background-color: turquoise; /* 示例颜色 */
    margin-left: 200px; /* 调整位置 */
}

/* 悬停显示逻辑 (初始尝试) */
img:hover + .playbutton, .playbutton:hover {
    display: inline-block;
    color: yellow;
}
img:hover + .addbutton, .addbutton:hover {
    display: inline-block;
    color: yellow;
}

.playbutton {
    background-color: red;
    position: absolute;
    margin-top: 120px;
    margin-left: 10px;
    display: none;
}
.addbutton {
    background-color: turquoise;
    position: absolute;
    margin-top: 120px;
    margin-left: 200px;
    display: none;
}

/* 修正后的悬停显示逻辑 */
img:hover ~ .playbutton,
img:hover ~ .addbutton {
    display: inline-block;
    color: yellow;
}

/* 如果希望按钮自身悬停时也保持显示，可以取消注释以下规则 */
/* .playbutton:hover, .addbutton:hover {
    display: inline-block;
    color: yellow;
} */

.playbutton {
    background-color: red;
    position: absolute;
    margin-top: 120px;
    margin-left: 10px;
    display: none;
}
.addbutton {
    background-color: turquoise;
    position: absolute;
    margin-top: 120px;
    margin-left: 200px;
    display: none;
}

/* 推荐的悬停显示逻辑：监听父元素 */
.cardObj:hover .playbutton,
.cardObj:hover .addbutton {
    display: inline-block;
    color: yellow;
}

/* 如果希望按钮自身悬停时也保持显示，可以添加以下规则 */
/* .playbutton:hover, .addbutton:hover {
    display: inline-block;
    color: yellow;
} */

/* 按钮基础样式及默认隐藏 */
.playbutton {
    background-color: red;
    position: absolute;
    margin-top: 120px;
    margin-left: 10px;
    display: none; /* 默认隐藏 */
    border: none;
    padding: 8px 15px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 14px;
    color: white; /* 默认文字颜色 */
}

.addbutton {
    background-color: turquoise;
    position: absolute;
    margin-top: 120px;
    margin-left: 200px; /* 调整位置 */
    display: none; /* 默认隐藏 */
    border: none;
    padding: 8px 15px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 14px;
    color: white; /* 默认文字颜色 */
}

/* 父元素悬停时，显示子按钮 */
.cardObj:hover .playbutton,
.cardObj:hover .addbutton {
    display: inline-block; /* 显示按钮 */
    color: yellow; /* 悬停时文字颜色 */
}

/* 确保图片在父元素中正确布局 */
.mainCardImage {
    width: 100%; /* 图片宽度填充父容器 */
    height: auto;
    display: block;
}

/* cardObj 容器样式，确保相对定位以便子按钮绝对定位 */
.cardObj {
    position: relative; /* 关键：为内部绝对定位元素提供定位上下文 */
    width: 250px; /* 示例宽度 */
    height: 250px; /* 示例高度 */
    overflow: hidden; /* 隐藏超出容器的内容 */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 列表项和主容器样式，根据实际布局调整 */
.mainCardObject ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* 示例：使卡片水平排列 */
    gap: 20px; /* 卡片间距 */
}

.mainCardObject li {
    /* 根据需要调整列表项样式 */
}