CSS实现悬停触发元素显示 悬停新元素时保留hover样式

问题说明 #

• 目标交互：鼠标悬停在class为looks的主图片上时触发hover动画，class为look_block的第二张图片覆盖在主图上方，class为quick-add的快捷操作按钮同步显示
• 异常表现：鼠标移动到快捷按钮上悬停时，主图悬停触发的所有样式变更全部还原，按钮本身也同步消失
• 已尝试操作：为显示出的按钮配置相同hover动画规则尝试维持样式，无法实现关联元素的样式保持
• 预期效果：鼠标悬停在快捷按钮上时，完整保留悬停主图时产生的所有样式变化

效果参考 #

• 未悬停图片状态：
  
• 悬停图片正常状态：
  
• 悬停按钮异常状态：
  

现有实现代码 #

CSS部分 #

.looks:hover {
  opacity: 0 !important;
}

.quick-add:hover+.look_block {
  position: absolute;
}

.quick-add:hover+.look_block {
  display: block !important;
}

.quick-add:hover {
  opacity: 1 !important;
  transition: 0.5s;
  margin-top: -1% !important;
}

.looks:hover+.quick-add {
  opacity: 1 !important;
  transition: 0.5s;
  margin-top: -1% !important;
}

.looks:hover+.look_block {
  display: block !important;
}

HTML部分 #

<span class="looks_reel" style="display:grid;">
    <div>
    <div class="look_block"><img alt="Super Cat Bed Warm Sleeping Cat Nest Soft Long Pluh Best Pet Dog Bed For Dogs Basket Cushion Cat Bed Cat Mat Animals Sleeping So" src="https://ae01.alicdn.com/kf/S9c1b79c0b59442d0b36ea6aea9cd266fO/Super-Cat-Bed-Warm-Sleeping-Cat-Nest-Soft-Long-Pluh-Best-Pet-Dog-Bed-For-Dogs.jpg.jpg" style="width: auto; height: auto;" id="look_1"></div>
    <div><i class="large material-icons">forward</i></div>
    <img class="looks" src="https://cdn.shopify.com/s/files/1/0645/6842/6713/files/8_banner.png?v=1656016078" alt="" width="17%">
    <div class="quick-add" style="opacity: 0; top: 114%; right: 78.8%; position: absolute; width: 16.5% !important;">
    <modal-opener data-modal="#QuickAdd-7687876215001">
                    <button id="quick-add-template--16036884447449__product-grid7687876215001-submit" type="submit" name="add" class="quick-add__submit button button--full-width button--secondary" aria-haspopup="dialog" aria-labelledby="quick-add-template--16036884447449__product-grid7687876215001-submit title-template--16036884447449__product-grid-7687876215001" data-product-url="/products/propeller-shower-head">
                      Choose options
                      <div class="loading-overlay__spinner hidden">
                        <svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewbox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
                          <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
                        </svg>
                      </div>
                    </button>
                  </modal-opener>
                  </div>
    </div>
</span>

问题原因 #

1. 触发范围绑定错误：现有hover逻辑仅绑定在.looks主图元素上，.quick-add按钮是.looks的相邻兄弟元素而非子元素，鼠标移动到按钮上时会脱离.looks的hover触发范围，直接导致样式还原
2. 选择器逻辑错误：代码中使用的相邻兄弟选择器+匹配规则为「选中紧跟在当前元素后的兄弟元素」，但.look_block在DOM结构中位于.quick-add之前，.quick-add:hover+.look_block完全无法命中目标元素，对应规则不生效

修复方案 #

1. 给三个交互元素（覆盖图look_block、主图looks、快捷按钮quick-add）的共同父级div添加统一class，例如product-card，将hover触发范围绑定到这个父容器上，只要鼠标在父容器区域内（包含主图、覆盖图、按钮）就保持激活样式
2. 替换原有错误的hover选择器逻辑，改用后代选择器匹配容器内的目标元素

修复后CSS代码 #

/* 父容器设置相对定位，作为内部绝对定位元素的定位参照 */
.product-card {
  position: relative;
}
/* 鼠标在卡片区域内时，主图透明 */
.product-card:hover .looks {
  opacity: 0 !important;
  transition: 0.5s;
}
/* 鼠标在卡片区域内时，覆盖图显示 */
.product-card:hover .look_block {
  display: block !important;
  position: absolute;
  top: 0;
  left: 0;
}
/* 鼠标在卡片区域内时，快捷按钮显示 */
.product-card:hover .quick-add {
  opacity: 1 !important;
  transition: 0.5s;
  margin-top: -1% !important;
}

修复后HTML代码（仅修改父div部分，其余内容不变） #

<span class="looks_reel" style="display:grid;">
    <!-- 给共同父元素添加product-card类 -->
    <div class="product-card">
    <div class="look_block"><img alt="Super Cat Bed Warm Sleeping Cat Nest Soft Long Pluh Best Pet Dog Bed For Dogs Basket Cushion Cat Bed Cat Mat Animals Sleeping So" src="https://ae01.alicdn.com/kf/S9c1b79c0b59442d0b36ea6aea9cd266fO/Super-Cat-Bed-Warm-Sleeping-Cat-Nest-Soft-Long-Pluh-Best-Pet-Dog-Bed-For-Dogs.jpg.jpg" style="width: auto; height: auto;" id="look_1"></div>
    <div><i class="large material-icons">forward</i></div>
    <img class="looks" src="https://cdn.shopify.com/s/files/1/0645/6842/6713/files/8_banner.png?v=1656016078" alt="" width="17%">
    <div class="quick-add" style="opacity: 0; top: 114%; right: 78.8%; position: absolute; width: 16.5% !important;">
    <modal-opener data-modal="#QuickAdd-7687876215001">
                    <button id="quick-add-template--16036884447449__product-grid7687876215001-submit" type="submit" name="add" class="quick-add__submit button button--full-width button--secondary" aria-haspopup="dialog" aria-labelledby="quick-add-template--16036884447449__product-grid7687876215001-submit title-template--16036884447449__product-grid-7687876215001" data-product-url="/products/propeller-shower-head">
                      Choose options
                      <div class="loading-overlay__spinner hidden">
                        <svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewbox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
                          <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
                        </svg>
                      </div>
                    </button>
                  </modal-opener>
                  </div>
    </div>
</span>

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