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
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
- Afisare optiune selectata intr-un Div
JavaScript - jQuery - Ajax
Primul mesaj
Cum pot face ca atunci cand e selectata o optiune dintr-o lista <select> sa fie afisata intr-un Div valoarea acelei optiuni.
Am acest cod...
Ultimul mesaj
Cu JavaScript adaugi un eveniment 'change' la elementul <select> care se va declansa cand o optiune e selectata.
In interiorul acelui...
- Afisare cu animatie continut adaugat cu JavaScript
JavaScript - jQuery - Ajax
Primul mesaj
Ideea pe care vreau sa o fac e că la clic pe un buton, conținutul vechi e înlocuit cu nou conținut HTML adăugat cu javascript.
Vreau ca noul...
Ultimul mesaj
Pentru a declanșa o tranziție CSS, modifica starea CSS după ce ai introdus codul HTML. Poți face asta schimbând o clasă (la container sau la un...
- Afisare rezultate paginate la scroll page
JavaScript - jQuery - Ajax
Primul mesaj
Salut,
In baza de date am 23 de rezultate din care initial afisez doar 10 si as vrea ca atunci cand ajung cu scroll la finalul paginii sa imi...
Ultimul mesaj
Am rezolvat(era o litera gresit apasata pe acolo), imi merge scriptul, dar a mai aparut o eroare.
Eu am 21 de inregistrari in baza de date.
Daca...
- Afisare numar cel mai mare dintr o coloana
PHP - MySQL - XML
Primul mesaj
Bună Marplo
Vreau să extrag din coloan pret cel mai mare numar ca de exemplu 4444.
Mie imi afisează 54 în loc de 4444, dacă în loc de 4444 modific...
Ultimul mesaj
Am schimbat `pret` varchar(20) DEFAULT NULL in `pret` int(11) NOT NULL ca la tine si merge.
Multumesc