Afisare un Div ascuns in Div-ul cu hover
Coduri intrebari, probleme legate de HTML, XHTML si CSS
-
Stefan
- Mesaje: 117
Afisare un Div ascuns in Div-ul cu hover
Salut, cum as putea afisa un div in acelasi div cand duc mouse-ul pe el? Am incercat, dar functioneaza doar daca este inafara div-ului respectiv..
COD HTML:
Cod: Selectaţi tot
<div class="admin card-footer text-muted">
<?php
$sql = "SELECT `data` FROM `tichete_raspuns` WHERE `text` = '". $rand2['text'] ."'";
data($sql);
?>
</div>
<div class="meniu ">
<a href="javascript:void(0)"><i class="ti-pencil-alt"></i></a>
<a href="javascript:void(0)"><i class="ti-check"></i></a>
<a href="javascript:void(0)"><i class="ti-heart"></i></a>
</div>
COD CSS:
Cod: Selectaţi tot
.meniu {
display: none;
}
.admin:hover + .meniu {
display: block;
}
Poza:
imgur.com/a/p4oqP
As vrea sa se afiseze div-ul cu clasa "meniu" in acelasi div cu clasa "admin".
Poza:
imgur.com/a/PkY6j
Am incercat sa introduc ultimul div in primul dar dupa nu mai functioneaza, o solutie?
MarPlo
Mesaje: 4343
Salut,
Ca sa afisezi div-ul ascuns in div-ul pe care faci "hover", il pui pe cel ascuns direct in el. Apoi aplici stiluri css pentru pozitionare, design dupa cum vrei sa arate.
Incearca asa:
Cod: Selectaţi tot
<style>
.admin {
border:2px dashed #000;
color:#d00000;
font-weight:700;
}
.meniu {
display: none;
color:#0000ee;
}
.admin:hover .meniu, .meniu:hover {
display: block;
}
</style>
<div class="admin card-footer text-muted">
Div .admin. Hover
<div class="meniu">
Div .meniu
</div>
</div>
Demo: