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图像放在其中间，使用site

但是现在我只想让盒子变成圆形，然后当用户将鼠标悬停在它上面时，它会发光

谢谢

Answer 1

添加#main-menu > ul > li:hover {} 并调整阴影here

和圈子：

边界半径：50％;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

造型按钮导航

1 个答案: