• 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

Object Storage Arubacloud
0 głosów
367 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,110 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,110 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,089 wizyt
pytanie zadane 12 listopada 2016 w HTML i CSS przez evilblade Nowicjusz (120 p.)
0 głosów
1 odpowiedź 575 wizyt
0 głosów
1 odpowiedź 195 wizyt
pytanie zadane 16 października 2020 w PHP przez vingilot85 Obywatel (1,150 p.)

92,684 zapytań

141,589 odpowiedzi

320,073 komentarzy

62,044 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.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...