Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS] HOVER na DIVie
Forum PHP.pl > Forum > Przedszkole
oomaster
Witam,

Mam problem z hoverem. Otóż chciałbym by po najechaniu na diva wyświetlił się warstwa na nim z obrazkiem. Ale działa tylko w części. Znaczy jak najdzie się na tekst to się wyświetla a na obrazku nie działa...

Cały kod i działanie dostępne tutaj: http://jsfiddle.net/KmmLa/

Z góry wielkie dzięki za pomoc :-)

  1. <a href="#"><div class="box-st wid-300 heg-190" style="background:url(http://masterkasa.pl/gfx/a3.jpg) no-repeat; background-color:#ededed;">
  2. <div class="box_hover">
  3. <div class="glbox-in"><p class="tag">HIT OFERTA</p></div>
  4. <div class="op op600 size-20 col-black txt-in">Tekst nasz przykładowy zaprezentowant na stronie</div>
  5. </div>
  6. </div></a>


  1. .box-st {float:left;position:relative;display: block;-webkit-border-radius: 4px;-moz-border-radius:4px;border-radius: 4px;}
  2.  
  3. .box_hover:hover {position: absolute; top: 0;left: 0; z-index: 100; width:300px; height:190px;background:url(http://masterkasa.pl/gfx/tlo_spr.png) no-repeat;background-position: center;}
  4.  
  5. .glbox-in {top: 96px; left: 5px; padding: 0px; position: absolute; z-index: 4;}
  6.  
  7. .txt-in {top: 121px; left: 0px; padding: 0px; position: absolute; z-index: 3; width:280px; padding:5px 10px 0 10px;}
  8.  
  9. .tag {background:#292564; color:#ffffff; font-family: 'Open Sans', sans-serif; font-size:13px; padding:2px 4px 2px 4px; display: inline;-webkit-border-radius: 4px;-moz-border-radius:4px;border-radius: 4px;}
  10.  
  11. .wid-300 {width:300px;}
  12. .heg-190 {height:190px;}
  13. .op{font-family: 'Open Sans', sans-serif; display: inline;}
  14. .op600 {font-weight: 600;}
  15. .size-20{font-size: 20px;}
  16. .col-black {color:#4a4a4a;}
PrinceOfPersia
nie .box-hover:hover, jeszcze wyżej musisz (w hierarchi), jak zamienisz to na .box-st:hover .box_hover, to jest dobrze (poza wystającym napisem HIT OFERTA, ale to dlatego, że go umieściłeś jako dziecko elementu .box-hover)
http://jsfiddle.net/KmmLa/1/
oomaster
Cytat(PrinceOfPersia @ 26.02.2014, 22:02:39 ) *
nie .box-hover:hover, jeszcze wyżej musisz (w hierarchi), jak zamienisz to na .box-st:hover .box_hover, to jest dobrze (poza wystającym napisem HIT OFERTA, ale to dlatego, że go umieściłeś jako dziecko elementu .box-hover)
http://jsfiddle.net/KmmLa/1/


A jak mogę zmienić napis HIT OFERTA by nie było dzieckiem .box_hover ?
Turson
A dlaczego nim nie może być questionmark.gif
oomaster
Cytat(Turson @ 26.02.2014, 22:46:47 ) *
A dlaczego nim nie może być questionmark.gif


To jak mogę zrobić ,żeby "hit oferta" i tekst diva był pod "hoverem" skoro mam elegancko zrobione z-index ?

Bo już nie wiem jak to zrobić...
PrinceOfPersia
zaznaczasz, Ctrl+X, a potem Ctrl+V w inne miejsce, np. tak:
http://jsfiddle.net/KmmLa/2/
(tylko tu jeszcze wypozycjonować musisz).

co to znaczy elegancko zrobione z-index?
oomaster
Cytat(PrinceOfPersia @ 27.02.2014, 00:14:26 ) *
co to znaczy elegancko zrobione z-index?


Chodziło o kolejność elementów
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.