Jak zaznaczyć kilka obiektów? Opcje

[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

[PHP] pobierz, plaintext 
.rate_img:nth-child(1n+1):hover {
    content:url("http://www.mpcforum.pl/public/style_images/def342/star.png");
    position: relative;
margin-right: -3px;
}
[PHP] pobierz, plaintext 

[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 (IMG:style_emoticons/default/wink.gif) ---> http://forum.php.pl/index.php?s=&showt...t&p=1062285

Ten post edytował sowiq 26.08.2013, 12:10:35

[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

[HTML] pobierz, plaintext 
div:hover{  // ktos na diva kliknie
 div.img{ // ustawi styl dla obrazka w divie
  color: #fff; // bialy
 }
}
[HTML] pobierz, plaintext 

Ten post edytował jackraymund 26.08.2013, 10:44:19

[sowiq]

Spróbuj tak: http://jsfiddle.net/DKqzJ/

Lepszego sposobu chyba nie znajdziesz (IMG:style_emoticons/default/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:

[CSS] pobierz, plaintext 
div{
    background: #f00;
}
div{
    background: #ff0;
}
 
// ORAZ:
div{
    background: #f00 !important;
}
div{
    background: #ff0;
}
[CSS] pobierz, plaintext 

Zerknij:
http://www.kurshtml.edu.pl/css/selektory.html
http://kurs.browsehappy.pl/CSS/Selektory
http://www.bt4.pl/dokumentacje/css/css3-selektory/#selectors