0

境界半径に少し問題があります。四角形をうまく丸めましたが、その上に置いたホバーを丸めることに問題があります。丸みを帯びた長方形の上隅と下隅で、ホバー自体は丸くなく、実際には長方形であることがわかります。丸めてみましたが、中心も丸くなります。これはおそらく意味をなさないことはわかっていますが、ここを見れば理解できます: 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
}
4

1 に答える 1

6

適切-webkit-border-radiusに追加.list:hover, name:hoverして、ニーズに合わせて調整するだけです。

これはjsfiddle の概念実証です。あなたがする必要があるのは、上の要素の左上と右上の角だけを丸め、下の要素の左下と右下の角だけを丸くすることです。これらの要素に特別なクラスを追加することをお勧めします。

アップデート：

実際、コメントで提案したように、最初の子セレクターと最後の子セレクターを追加し、フィドルを更新しました

.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;
}
于 2012-04-22T14:46:30.180 に答える