Comment restreindre CSS pour qu'il ne prenne effet que sur un seul div dans la même catégorie
P粉475315142
P粉475315142 2023-09-09 21:32:30
0
1
534

J'essaie de faire apparaître le titre sur l'image au survol de la souris, mais ils doivent tous avoir la même classe. Je ne sais pas si ce que je demande est possible, mais j'envisagerais différentes solutions. C'est mon code actuel.

<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>

Voici mon code 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;
}
P粉475315142
P粉475315142

répondre à tous(1)
P粉709644700

J'ai juste dû changer la position en relatif, voici mon code

.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;
}
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal