Display block po aktywowaniu :hover

pytanie zadane 3 kwietnia 2021 w HTML i CSS przez Rafał Termoaktywny Początkujący (400 p.)

hey hey hey

<html>
<head>
	<title>
	</title>
</head>

<body>
	<div id="top10">
		<div class="items">
			<div class="i1">
				[obrazek_1]
			</div>


			<div class="i2">
				[obrazek_2]
			</div>


			<div class="show1">
				Zawartość do wyswietlenia po najechaniu na [obrazek_1]
			</div>


			<div class="show2">
				Zawartość do wyswietlenia po najechaniu na [obrazek_2]
			</div>
		</div>
	</div>
</body>
</html>

I próbowałem na zasadzie display: none/block i hover

.show1, .show2 {
	display: none;
}

.i1:hover .show1 {
	display: block;
}

#top10 .i1:hover>.show1 {
	display: block;
}

1 odpowiedź

odpowiedź 3 kwietnia 2021 przez overcq Pasjonat (21,710 p.)

Z CSS to zadziała, a jeśli nie to może Javascript.

<html>
<head>
    <title>
    </title>
</head>
 
<body>
    <div id="top10">
        <div class="items">
            <div class="i1">
                [obrazek_1]
            <div class="show1">
                Zawartość do wyswietlenia po najechaniu na [obrazek_1]
            </div>
            </div>
 
 
            <div class="i2">
                [obrazek_2]
            <div class="show2">
                Zawartość do wyswietlenia po najechaniu na [obrazek_2]
            </div>
             </div>
 
 
 
 
        </div>
    </div>
</body>
</html>