0

ナビゲーション バーの ul があります。私のCSSでは、ホバーカラートランジションがあります。コードは次のとおりです。

HTML:

<body>
<ul>
  <li class="sideBarButton">
    <a href="www.google.com">
     Home
    </a>
  </li>
  <li class="sideBarButton">
    <a href="www.google.com">
     About
    </a>
  </li>
       <li class="sideBarButton">
    <a href="www.google.com">
        Download
    </a>
  </li>
</ul> <!--- Navbar-->
</body>

CSS:

.sideBarButton {
    font-family: Verdana;
    font-size: 14px;
    font-style: normal;
    font-weight: bold;
    font-variant: normal;
    color: #000;
    background-color: #000;
    border: 2px none #FFF;
    clear: none;
    float: left;
    height: auto;
    list-style-type: none;
    display: block;
    width: 90px;
    margin: 0px;
    padding: 0px;
    text-align: center;
    text-align-last: center;
    opacity: 1;
}

.sideBarButton a {
    background-color: #000;
    background-image: url(woodbutton.gif);
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
    text-align: center;
    text-decoration: none;
    width: 90px;
    display: block;
    color: black;
}
.sideBarButton a:hover {
    opacity: 0.7;

(少し乱雑なコードで申し訳ありません。コードを整理して、不要なビットを取り除くつもりでした。) ボタンは画像です。最初の子セレクターと最後の子セレクターの 2 つを丸めるというアイデアがありましたが、完全な ul にクラスを割り当てて css を設定するときに、セレクターを (階層化?) 混乱させたと思います。セレクター (例: .ulClass .sideBarButton:first-child) は何もしません。何が欠けていますか、どうすれば修正できますか?

前もって感謝します！(注: クラス名は無視してください。これは上部のナビゲーション バーであり、サイドではありません。

編集：明確にするために、ナビゲーションバーの四隅すべてを丸めたいと思います。

4

1 に答える 1

0

liクラスの代わりに をターゲットにすることができます

.ulClass > li:first-child
 {
   border-bottom-left-radius: 4px;
   border-top-left-radius: 4px;   
 }
.ulClass > li:last-child
 {
   border-bottom-right-radius: 4px;
   border-top-right-radius: 4px;   
 }

また、丸みを帯びた角が適用されない原因となっていた問題のあるスタイルDisplay:blockを削除しました。.sideBarButton a

コードをクリーンアップして、不要なスタイルを削除することをお勧めします。

このフィドルをチェックしてくださいhttp://jsfiddle.net/aSn8C/5/

于 2013-10-18T00:08:43.423 に答える