Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Jak zaznaczyć kilka obiektów?
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
jackraymund
mam taki kod który mi zaznacza każda gwiazdke
chce zrobić takie coś, np.
mam myszke na 1 gwiazdce, pokazuje 1 pierwsza gwiazdke
2 gw, pokazuje pierwsze 2 gwiazdki,
i tak do 5, tylko poki co zaznacza mi pojedynczo, i nie moge wyczaić jak to zrobić aby dzialalo poprawnie
  1. .rate_img:nth-child(1n+1):hover {
  2. content:url("http://www.mpcforum.pl/public/style_images/def342/star.png");
  3. position: relative;
  4. margin-right: -3px;
  5. }
sowiq
Nie da się tego zrobić w samym CSS (a jeśli już, to byłaby to jakaś karkołomna gimnastyka). Zastosuj JavaScript.

A jednak się da całkiem prosto wink.gif ---> http://forum.php.pl/index.php?s=&showt...t&p=1062285
jackraymund
wlasnie niechce mieszać w to js'a:/
a nie znam na tyle css'a abym to ogarnął:/
zrobiłbym to nawet w kilku regułkach np.

ogólnie to nie wiem jak zrobić np.
że jeżeli
  1. div:hover{ // ktos na diva kliknie
  2. div.img{ // ustawi styl dla obrazka w divie
  3. color: #fff; // bialy
  4. }
  5. }
sowiq
Spróbuj tak: http://jsfiddle.net/DKqzJ/

Lepszego sposobu chyba nie znajdziesz tongue.gif
jackraymund
No kod działa fajnie, tylko go nie do końca rozumie.
co oznacza ~ i !important ?
jakiś link do referencji? bo na google doszukać niczego się nie mogę
sowiq
~ oznacza wszystkie następne elementy. Tak więc div:hover ~ div oznacza wszystkie elementy <div /> znajdujące się za elementem <div />, nad którym jest kursor.
Jest podobny do niego selektor +, który oznacza kolejny element (działa jak ~, ale pobiera tylko pierwszy następny element).

Co do modyfikatora !important to zwiększa on "ważność" reguły.
Spróbuj poniższe przykłady:

  1. div{
  2. background: #f00;
  3. }
  4. div{
  5. background: #ff0;
  6. }
  7.  
  8. // ORAZ:
  9. div{
  10. background: #f00 !important;
  11. }
  12. div{
  13. background: #ff0;
  14. }


Zerknij:
http://www.kurshtml.edu.pl/css/selektory.html
http://kurs.browsehappy.pl/CSS/Selektory
http://www.bt4.pl/dokumentacje/css/css3-selektory/#selectors
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.