:hover dla kilku elementow Opcje

[shycat]

Witam, mam taki kod:

Kod

<style>

p, span
{
  background-color:lightblue;
}

p
{
  margin:0;
  padding:5px
}

span{display:block;overflow:hidden;height:1px}
span.r1{margin:0 9px}
span.r2{margin:0 6px}
span.r3{margin:0 4px}
span.r4{margin:0 3px}
span.r5{margin:0 2px;height:2px}
span.r6{margin:0 1px;height:3px}

span:hover, p:hover
{
  background-color:red
}

</style>



<span class="r1"></span><span class="r2"></span><span class="r3"></span><span class="r4"></span><span class="r5"></span><span class="r6"></span>
<p>abc</p>
<span class="r6"></span><span class="r5"></span><span class="r4"></span><span class="r3"></span><span class="r2"></span><span class="r1"></span>

I zastanawiam sie jak zrobic, zeby po najechaniu na ten "przycisk" z zaokraglonymi rogami, aby zmienil sie caly jego kolor, a nie kolory poszczegolnych jego elementow jak jest w tym przykladzie:

Kod

span:hover, p:hover
{
  background-color:red
}

[Zajec]

Opakuj całość jakimś divem i zrób

Kod

div.opakowanie:hover > * { background-color: red; }

[shycat]

ok, dzieki za odpowiedz, teraz dziala jak powinno. Moglbym jeszcze prosic o informacje jak "to dziala" ? w jakich przypadkach mozna tego uzywac itd... niestety nie mam pojecia jak mozna to znalezc na googlach, wiec w sumie sama "nazwa" tego "tricku" mi wystarczy, dzieki

ps. no i niestety to w IE nie dziala... jest jakis sposob, zeby w IE ten "trick" tez dzialal?

Ten post edytował shycat 20.01.2011, 23:35:22

[Damonsson]

nadaj czerwone tło dla każdego elementu który jest dzieckiem diva o class "opakowanie", ale tylko wtedy gdy jest nad nim kursor myszki

div.opakowanie:hover > * { background-color: red; }



To żaden trick, zwykły css.

[Zajec]

ok, dzieki za odpowiedz, teraz dziala jak powinno. Moglbym jeszcze prosic o informacje jak "to dziala" ? w jakich przypadkach mozna tego uzywac itd... niestety nie mam pojecia jak mozna to znalezc na googlach, wiec w sumie sama "nazwa" tego "tricku" mi wystarczy, dzieki

ps. no i niestety to w IE nie dziala... jest jakis sposob, zeby w IE ten "trick" tez dzialal?

W jakim IE? IE miało problemy z :hover chyba tylko w wersji 6. Mam nadzieję, że nie przejmujesz się 2,5% polskiego rynku, które w dodatku powoli znika?

[shycat]

Damonsson, dzieki za konkretne wyjasnienie



hm, ja mam IE 8 (oczywiscie do testow stron) i tez nie dziala

Ten post edytował shycat 21.01.2011, 00:33:34

[Zajec]

hm, ja mam IE 8 (oczywiscie do testow stron) i tez nie dziala

Podaj adres lub jakiś test-case.

[shycat]

Kod

<style>

p, span
{
  background-color:lightblue;
}

p
{
  margin:0;
  padding:5px
}

span{display:block;overflow:hidden;height:1px}
span.r1{margin:0 9px}
span.r2{margin:0 6px}
span.r3{margin:0 4px}
span.r4{margin:0 3px}
span.r5{margin:0 2px;height:2px}
span.r6{margin:0 1px;height:3px}

div.opakowanie:hover
>*{
background-color: red;
}

</style>




<div class="opakowanie">

<span class="r1"></span><span class="r2"></span><span class="r3"></span><span class="r4"></span><span class="r5"></span><span class="r6"></span>
<p>abc</p>
<span class="r6"></span><span class="r5"></span><span class="r4"></span><span class="r3"></span><span class="r2"></span><span class="r1"></span>

</div>

[Zajec]

(...)

Nie mam teraz IE pod ręką, ale nigdy nie próbowałem łamać regułek CSS w "połowie". Może to przeszkadza IE?

Ten post edytował Zajec 23.01.2011, 11:40:28

[shycat]

[...] w "połowie" [...]

Tzn? bo nie bardzo rozumiem

[Zajec]

Tzn? bo nie bardzo rozumiem

Ups, myślałem że zrozumiale to piszę

Kod

div.opakowanie:hover
>*{

zamień na

Kod

div.opakowanie:hover > * {

Czyli po prostu w jednej lini. Spacje są opcjonalne, je IE na pewno zrozumie. Może po prostu IE nie rozumie łamania linii (rozbijania regułki na dwie linie).

[shycat]

ee dalej nie dziala