樣式化按鈕導航

Question

大家好，我想為我的網站創建一個按鈕導航。 我正在嘗試讓它適用於4個按鈕，我希望它們是一個圓形，所有不同的顏色，然后當用戶將鼠標懸停在它上面時，它將發光。 所以我到目前為止：

HTML：

<nav id="main-menu">
  <ul>
    <li class="model-icon a-color hvr-glow">

    </li>
    <li  class="model-icon b-color hvr-glow">

    </li>
    <li  class="model-icon c-color hvr-glow">

    </li>
    <li  class="model-icon d-color hvr-glow">

    </li>
  </ul>
</nav>

#main-menu  > ul > li {
    margin: 0 5px;
    width: 50px;
    height: 50px;
    cursor: pointer;
}

.a-color {
    background-color: Yellow;
}

.b-color {
    background-color: Red;
}

.c-color {
    background-color: White;
}

.d-color {
    background-color: Green;
}

但是問題是，沒有發光效果，它們是盒子而不是圓圈。

將來，我將使用此網站將svg圖像放在其中

但是現在我只想讓盒子變成圓形，然后當用戶將鼠標懸停在上面時，它會發光

謝謝

Answer 1

添加#main-menu > ul > li:hover {}並在此處調整陰影

對於圈子：

邊界半徑：50％；

 #main-menu > ul > li { margin: 0 5px; width: 50px; height: 50px; cursor: pointer; } #main-menu > ul > li:hover { -webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75); -moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75); box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75); border-radius:50%; } .a-color { background-color: Yellow; } .b-color { background-color: Red; } .c-color { background-color: White; } .d-color { background-color: Green; } 

 <nav id="main-menu"> <ul> <li class="model-icon a-color"> </li> <li class="model-icon b-color"> </li> <li class="model-icon c-color"> </li> <li class="model-icon d-color"> </li> </ul> </nav>