求助：鼠标悬停链接时显示图片Overlay的实现问题

我想实现鼠标悬停在文章标题链接上时，显示图片区域的遮罩层（Overlay），但尝试多种CSS选择器都没效果。

HTML结构 #

<div class="blog-entry-link">
   <div class="thumbnail">
      <img>
      <span class="overlay"></span>
   </div>
   <header class="blog-entry-header clr">
      <h2 class="blog-entry-title entry-title">
         <a>Title</a>
      </h2>
   </header>
</div>

尝试过的CSS代码 #

1. 最初的兄弟选择器写法：

header.blog-entry-header.clr h2.blog-entry-title.entry-title a:hover + .thumbnail .overlay {
    -moz-opacity: 1;
    -webkit-opacity: 1;
    opacity: 1;
}

试过相邻兄弟选择器(+)、通用兄弟选择器(~)和子选择器(>)，均无效。

2. 保留的链接拉伸样式：

.entry-title a::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

3. :has()选择器尝试：

.blog-entry-link:has(> a:hover ) {
    .blog-entry-link .thumbnail .overlay {
        -moz-opacity: 1;
        -webkit-opacity: 1;
        opacity: 1;
    }
}

同样无效。

问题根源 #

标题链接a在DOM结构中是.thumbnail的后兄弟节点，CSS无法直接通过后元素的hover状态影响前元素；而你用a::before把链接扩展到了整个父容器，所以可以通过父容器的hover状态间接触发遮罩层显示。

正确CSS代码 #

/* 给父容器设置相对定位，让链接伪元素的定位基于它 */
.blog-entry-link {
    position: relative;
}

/* 给图片容器设置相对定位，让遮罩层的绝对定位基于它 */
.thumbnail {
    position: relative;
}

/* 默认隐藏遮罩层，可添加过渡动画提升体验 */
.thumbnail .overlay {
    opacity: 0;
    -moz-opacity: 0;
    -webkit-opacity: 0;
    transition: opacity 0.3s ease;
    /* 遮罩层必须绝对定位才能覆盖图片 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 示例半透明黑色遮罩 */
}

/* 保留你的链接拉伸样式，添加z-index确保能触发hover */
.entry-title a::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
}

/* 父容器hover时显示遮罩层 */
.blog-entry-link:hover .thumbnail .overlay {
    opacity: 1;
    -moz-opacity: 1;
    -webkit-opacity: 1;
}

方案说明 #

因为链接的伪元素已经覆盖了整个.blog-entry-link，鼠标悬停在标题区域时，父容器.blog-entry-link会触发:hover状态，此时通过父容器的hover选择器控制子元素.overlay的显示，完全符合CSS选择器的逻辑，同时兼容性比:has()更好（:has()在旧版浏览器中支持有限）。

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