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