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

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