: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
}

[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 (IMG:style_emoticons/default/smile.gif)

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