利用CSS相邻兄弟选择器实现特定元素悬停效果

<div class="tab-container">
    <div class="tab">
        <div class="img-wrapper">
            <button>悬停我</button>
        </div>
        <div class="text-content">
            <p>这是产品标题：高级定制沙发</p>
            <p>产地：欧洲 | 材质：真皮</p>
        </div>
    </div>

    <div class="tab">
        <div class="img-wrapper">
            <button>悬停我</button>
        </div>
        <div class="text-content">
            <p>这是产品标题：智能家居套装</p>
            <p>功能：远程控制 | 兼容：多平台</p>
        </div>
    </div>

    <div class="tab">
        <div class="img-wrapper">
            <button>悬停我</button>
        </div>
        <div class="text-content">
            <p>这是产品标题：便携式咖啡机</p>
            <p>特点：小巧轻便 | 容量：200ml</p>
        </div>
    </div>
</div>

.tab-container {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    padding: 20px;
    background-color: #f9f9f9;
}

.tab {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    width: 280px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.img-wrapper {
    width: 100%;
    height: 100px;
    background-color: #e0e0e0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    border-radius: 4px;
    cursor: pointer; /* Indicating it's interactive */
}

.img-wrapper button {
    padding: 8px 15px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
}

.text-content {
    color: #333; /* 默认文本颜色 */
    font-size: 14px;
    line-height: 1.5;
    transition: color 0.3s ease; /* 添加平滑过渡效果 */
}

.text-content p {
    margin: 0;
    padding: 2px 0;
}

/* 核心CSS规则：当鼠标悬停在.img-wrapper上时，改变其紧邻的兄弟.text-content的文本颜色 */
.img-wrapper:hover + .text-content {
    color: #e67e22; /* 悬停时文本变为橙色 */
}

/* 如果需要，也可以让按钮悬停时改变文本颜色，但需要调整HTML结构使按钮成为.text-content的直接兄弟 */
/* 例如：
.tab > button:hover + .text-content {
    color: green;
}
*/

.img-wrapper:hover + .text-content {
    color: #e67e22; /* 悬停时文本变为橙色 */
}