如何让CSS只影响同一类的一个div答案

【问题标题】：How to have css only affect one div of the same class如何让CSS只影响同一类的一个div
【发布时间】：2022-12-06 11:45:24
【问题描述】：

当您将鼠标悬停在图像上时，我试图使标题出现在图像上，但它们必须具有相同的类。我不知道我问的问题是否可能，但我会考虑各种不同的解决方案。这就是我目前拥有的。

<div class="item">
            <img class="Placeholderimg" src="placeholder.jpg">
            <div class="hovershow1">
                <div class="title">
                    Testing1
                </div>
            </div>
        </a>
    </div>
    <div class="item">
        <img class="Placeholderimg" src="placeholder.jpg">
        <div class="hovershow2">
            <div class="title">
                Testing2
            </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;
}

【问题讨论】：

不太明白你在问什么，但从代码的外观来看，我想只需将 position: relative 添加到 item 类，它就会解决你的问题？
@HenryVarro 是的，谢谢你，我真的不知道怎么说，但这解决了我的问题！非常感谢！

标签： html css

【解决方案1】：

我只需要将位置更改为相对位置，现在这是我的代码

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

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

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

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

【讨论】：