如何让CSS仅作用于同class下的单个div？实现图片悬停显示标题

想要实现鼠标悬停在图片上时，图片上方显示对应标题，且相关元素必须使用相同的class，不确定是否可行，求多种解决方案。

当前HTML代码：

<div class="item">
    <img class="Placeholderimg" src="placeholder.jpg">
    <div class="hovershow1">
        <div class="title">
            Testing1
        </div>
    </div>
</div>
<div class="item">
    <img class="Placeholderimg" src="placeholder.jpg">
    <div class="hovershow2">
        <div class="title">
            Testing2
        </div>
    </div>
</div>

当前CSS代码：

.item{
    height: 156px;
    width: 156px;
}

.Placeholderimg{
    height: 156px;
    width: 156px;
    border-radius: 10px;
}

.hovershow1{
    visibility: hidden;
    position: absolute;
    top:0;
    height: 156px;
    width:156px;
    background-color: rgba(40, 40, 40, 0.4);
    border-radius: 10px;
}

.item:hover .hovershow1{
    visibility:visible;
}

.hovershow2{
    visibility: hidden;
    position: absolute;
    top:0;
    height: 156px;
    width:156px;
    background-color: rgba(40, 40, 40, 0.4);
    border-radius: 10px;
}

.item:hover .hovershow2{
    visibility:visible;
}

解决方案1：纯CSS统一Class实现（最简洁） #

核心是把所有悬浮层的class统一为hovershow，利用CSS父子选择器实现悬停显示，无需重复写多个类。

修改后的HTML #

<div class="item">
    <img class="Placeholderimg" src="placeholder.jpg">
    <div class="hovershow">
        <div class="title">Testing1</div>
    </div>
</div>
<div class="item">
    <img class="Placeholderimg" src="placeholder.jpg">
    <div class="hovershow">
        <div class="title">Testing2</div>
    </div>
</div>

修改后的CSS #

.item{
    height: 156px;
    width: 156px;
    position: relative; /* 关键：让绝对定位的悬浮层相对于父元素定位 */
}

.Placeholderimg{
    height: 156px;
    width: 156px;
    border-radius: 10px;
}

.hovershow{
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0; /* 加上left确保和图片对齐 */
    height: 156px;
    width: 156px;
    background-color: rgba(40, 40, 40, 0.4);
    border-radius: 10px;
    display: flex; /* 可选：让标题居中显示 */
    align-items: center;
    justify-content: center;
    color: white; /* 可选：优化标题可读性 */
}

.item:hover .hovershow{
    visibility: visible;
}

说明：给.item加position: relative是为了避免所有悬浮层都跑到页面左上角，确保悬浮层跟着父元素走；添加flex布局可以让标题居中，提升视觉效果。

解决方案2：利用CSS伪元素+HTML属性（无需额外悬浮层） #

如果不想额外写.hovershow层，可以用data-*属性存储标题，通过CSS伪元素直接渲染，进一步简化HTML结构。

修改后的HTML #

<div class="item" data-title="Testing1">
    <img class="Placeholderimg" src="placeholder.jpg">
</div>
<div class="item" data-title="Testing2">
    <img class="Placeholderimg" src="placeholder.jpg">
</div>

对应的CSS #

.item{
    height: 156px;
    width: 156px;
    position: relative;
}

.Placeholderimg{
    height: 156px;
    width: 156px;
    border-radius: 10px;
}

.item::after{
    content: attr(data-title); /* 读取data-title属性值作为标题内容 */
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    height: 156px;
    width: 156px;
    background-color: rgba(40, 40, 40, 0.4);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.item:hover::after{
    visibility: visible;
}

说明：这种方法完全不需要额外的DOM元素，所有标题内容存在data-title属性里，通过CSS伪元素渲染，代码更简洁，且所有.item使用统一class。

解决方案3：JavaScript辅助实现（适配复杂交互） #

如果需要更复杂的交互效果（比如过渡动画、动态修改标题），可以用JS实现，同样保持元素class统一。

HTML（和方案1一致） #

<div class="item">
    <img class="Placeholderimg" src="placeholder.jpg">
    <div class="hovershow">
        <div class="title">Testing1</div>
    </div>
</div>
<div class="item">
    <img class="Placeholderimg" src="placeholder.jpg">
    <div class="hovershow">
        <div class="title">Testing2</div>
    </div>
</div>

CSS #

.item{
    height: 156px;
    width: 156px;
    position: relative;
}

.Placeholderimg{
    height: 156px;
    width: 156px;
    border-radius: 10px;
}

.hovershow{
    opacity: 0; /* 用opacity替代visibility，支持过渡动画 */
    position: absolute;
    top: 0;
    left: 0;
    height: 156px;
    width: 156px;
    background-color: rgba(40, 40, 40, 0.4);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: opacity 0.3s ease; /* 添加平滑过渡动画 */
}

JavaScript #

// 获取所有.item元素
const items = document.querySelectorAll('.item');

items.forEach(item => {
    const hoverShow = item.querySelector('.hovershow');
    
    // 鼠标悬停显示
    item.addEventListener('mouseenter', () => {
        hoverShow.style.opacity = '1';
    });
    
    // 鼠标离开隐藏
    item.addEventListener('mouseleave', () => {
        hoverShow.style.opacity = '0';
    });
});

说明：这种方法支持添加过渡动画，适合需要更流畅交互的场景，且所有元素依然使用统一class。

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