border-radiusの問題CSS

Question

border-radiusに問題があります。私は正常に四角形を四捨五入していますが、私はそれを置いたホバーを四捨五入することに問題があります。丸い矩形の上端と下端に、ホバー自体が丸められておらず、実際には長方形であることがわかります。私はそれを丸めようとしましたが、中心も丸めます。 http://jsfiddle.net/hCg3J/

私がしたいことは、それぞれの選択肢にその領域全体を強調表示させて突き出さないことです。

HTML：

<ul class="pageitem"> 
    <li class="list" style="border-top:none;"><a href="iphone4.html";><span class="name">iPhone 4/4S</span><div class="arrow"></div></a></li> 
    <li class="list"><a href="iphone3.html";><span class="name">iPhone 3G/3GS</span><div class="arrow"></div></a></li> 
    <li class="list"><a href="ipod.html";><span class="name">iPod Touch</span><div class="arrow"></div></a></li> 
</ul> 

CSS

.pageitem { 
    -webkit-border-radius: 8px; 
    behavior: url(/border-radius.htc); 
    border-radius: 8px; 
    position:relative; 
    zoom: 1; 
    -moz-border-radius: 8em; 
    -khtml-border-radius: 8px; 
    border-radius: 8px; 
    background-color: #fff; 
    border: #878787 solid 1px; 
    font-size: 12pt; 
    overflow: hidden; 
    padding: 0; 
    height: auto; 
    width: auto; 
    margin: 3px 9px 17px; 
    list-style: none 
} 

Answer 1

ただ.list:hover, name:hoverに適切-webkit-border-radiusを追加し、あなたのニーズに合わせて調整します。

ここにはjsfiddle proof of conceptがあります。あなたがする必要があるのは、上部要素と下部左要素のために左上と右上隅だけを丸め、下部要素はbuttom-rightです。これらの要素に特別なクラスを追加することをお勧めします。

UPDATE：

実は

私はコメントで示唆したように、私は最初の子と最後の子のセレクタを追加した、

.list:hover:first-child, name:hover:first-child { 
    -webkit-border-radius: 8px 8px 0px 0px; 
} 

.list:hover:last-child, name:hover:last-child { 
    -webkit-border-radius: 0px 0px 8px 8px; 
}