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:

Subiecte similare