• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Pojawiający się div na divie jako informacja

Aruba Cloud - Virtual Private Server VPS
0 głosów
542 wizyt
pytanie zadane 30 grudnia 2017 w HTML i CSS przez wgnsy123 Początkujący (410 p.)

Witam. Mógłby mi ktoś objaśnić na jakiej zasadzie działa taki bajer, że np. na stronie jakiegoś sklepu najedziemy na produkt to obrazek produktu zmienia się w dajmy na to tabele z informacjami.

Mam pętle z wypisaniem produktów z mysql w postaci tabel, ale wstawiając do tego diva z position:absolute (na poczatku ma nałożone opacity 0 aby potem po najechaniu ustawić 1) te divy się stackują, nakładają na siebie zamiast jeden obok drugiego jak generowane tabele, Z góry przepraszam za chaos ale męczę się z tym i już ledwo trzymie.

 

pętla robi tabele:

 

<table class="tabela" border="2" cellspacing="0" >
								 
									<tr>
									
									<td><div id="iproduct"><img src="$img" width="180px" height="280px"/></div>
                                    
                                    </td>
									
									</tr>
									
									<tr class="nazwa_produktu">
									<td>$name</td>
									
									</tr>
									
									</tr>
									
									<tr class="nazwa_produktu">
									<td>$cena zł</td>
									
									</tr>

									<div class="proinfo"></div>
								</table>

 

 

CSS tego diva i tabeli:


.tabela{
	margin:15px;
	width:200px;
	height:300px;
	float:left;
    
	text-align:center;
	background-image:url("news.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
	background-attachment:fixed;

}
.proinfo{
    
	width:200px;
	height:300px;
	float:left;
    position:absolute;
	text-align:center;
    background-color: red;
}


 

2 odpowiedzi

0 głosów
odpowiedź 30 grudnia 2017 przez plucins Stary wyjadacz (11,130 p.)
możesz pokazać zachowanie jakie chcesz uzyskać ?
komentarz 30 grudnia 2017 przez wgnsy123 Początkujący (410 p.)
Wejdź na np. cdp.pl, najeżdżając na produkt pojawiaja się informacje. No i mi chodzi o to samo, tak jakby div na divie, gdzie 1 div to zdjęcie produktu, a drugi to z informacjami który ma 'opacity 0', po najechaniu 'opacity 1' i pojawia się zamiast obrazka (diva 1). No chyba ze w JS idzie jakoś zrobić zamieniając diva 1 na diva 2, sory z gory za chaotycznie pisanie ale godzina pozna i lekkie zdenerwowanie.
komentarz 30 grudnia 2017 przez wgnsy123 Początkujący (410 p.)
A nie da rady po prostu poprzez JS zamienić wnętrze z diva z obrazkiem na przygotowanego diva z informacjami dodając do tego jakieś animacje fadeIn i fadeOut?
komentarz 30 grudnia 2017 przez plucins Stary wyjadacz (11,130 p.)
ale to będziesz tracił obrazem przez to.
0 głosów
odpowiedź 31 grudnia 2017 przez Badiusz Obywatel (1,070 p.)
Trochę późno i nie za bardzo już myślę, nie wiem jak to zadziała w pętli, ale ja bym spróbował coś takiego:
.proinfo:hover .tabela

{

display: block; albo visibility: visible;

}

Podobne pytania

0 głosów
1 odpowiedź 1,264 wizyt
pytanie zadane 12 listopada 2016 w HTML i CSS przez evilblade Nowicjusz (120 p.)
0 głosów
1 odpowiedź 604 wizyt
0 głosów
1 odpowiedź 231 wizyt
pytanie zadane 16 października 2020 w PHP przez vingilot85 Obywatel (1,150 p.)

93,329 zapytań

142,323 odpowiedzi

322,400 komentarzy

62,662 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...