在侧边栏导航中更改自定义形状的悬停样式答案

【问题标题】：Changing the Hover style of a custom made shape in a sidebar nav在侧边栏导航中更改自定义形状的悬停样式
【发布时间】：2019-07-10 13:29:26
【问题描述】：

我设计了一个自定义圆形（带边框）来配合我的侧边栏导航链接。

但是当悬停或激活时，我无法创建所需的悬停样式，如图所示：

.sidebar-menu-dot {
  height: 13px;
  width: 13px;
  background-color: #fff;
  border-radius: 50%;
  border: 3px solid #828282;
  margin-right: 18px;
  display: inline-block;
}

#sidebar-menu .sidebar-menu-dot:hover,
#sidebar-menu .sidebar-menu-dot .active {
  height: 13px;
  width: 13px;
  background-color: #27A9F8;
  border-radius: 50%;
  border: 3px solid #ffffff;
  margin-right: 18px;
  display: inline-block;
}

<div id="sidebar-menu" class="metismenu">

  <ul>

    <li>
      <a href="home2.html" class="active">
        <span class="sidebar-menu-dot"></span>
        <span>Overview</span>
      </a>
    </li>

    <li>
      <a href="#">
        <span class="sidebar-menu-dot"></span>
        <span>Student</span>
      </a>
    </li>

  </ul>

</div>

【问题讨论】：

标签： html css

【解决方案1】：

看看我在 sn-p 上添加的 CSS 属性。只需将一些悬停属性应用到li:hover 标签上，您就可以获得精美的悬停效果。

.sidebar-menu-dot {
    height: 13px;
    width: 13px;
    background-color: #fff;
    border-radius: 50%;
    border: 3px solid #828282;
    margin-right: 18px;
    display: inline-block;
}
#sidebar-menu .sidebar-menu-dot:hover, #sidebar-menu .sidebar-menu-dot .active {
    height: 13px;
    width: 13px;
    background-color: #27A9F8;
    border-radius: 50%;
    border: 3px solid #ffffff;
    margin-right: 18px;
    display: inline-block;
}
.metismenu{
  width:50%;
}
span { /*ADDED*/
    color: gray;
    font-size:20px;
}
li{ /*ADDED*/
    padding: 10px;
}
li:hover { /*ADDED*/
    background-color: #27A9F8;
}
li:hover .sidebar-menu-dot { /*ADDED*/
    background-color: #27A9F8;
    border-color: white;
    color: white;
}
li:hover span { /*ADDED*/
    color: white;
}
ul { /*ADDED*/
    list-style: none;
}
a { /*ADDED*/
    text-decoration: none;
}

<div class="metismenu" id="sidebar-menu">
    <ul>
        <li>
            <a class="active" href="home2.html">
                <span class="sidebar-menu-dot">
                </span>
                <span>
                    Overview
                </span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="sidebar-menu-dot">
                </span>
                <span>
                    Student
                </span>
            </a>
        </li>
    </ul>
</div>

【讨论】：

【解决方案2】：

这是一个很好的起点。您可以利用psuedo class 插入您的圈子。这是一个好处，用户无法复制/选择它，如果他们需要复制文本。

仅供参考，如果您不打算使用 span 设置样式，则没有真正的理由将文本放在 <span> 元素内。它本质上是内联的。

#sidebar-menu {
  width: 50%;
  margin: 0 auto;
}
#sidebar-menu ul {
  list-style: none;
  padding: 0; margin: 0;
}
#sidebar-menu li {
  width: 100%;
}
a:any-link {
 color: grey;
}
#sidebar-menu a {
  width: 100%;
  display: block;
  padding: 15px;
 text-decoration: none;
}
#sidebar-menu a.active {
 color: white;
 background-color: cornflowerblue;
}
#sidebar-menu a:before {
  content: "";
  display: inline-flex;
  width: 13px; height: 13px;
  background-color: #fff;
  border-radius: 50%;
  border: 3px solid #828282;
}
#sidebar-menu a.active:before {
  background-color: cornflowerblue;
  border-color: white;
}



#sidebar-menu a:not(.active):hover,
#sidebar-menu a:not(.active):hover:before {
  background-color: #92b4f2;
  border-color: white;
  color: white;
}

<div id="sidebar-menu" class="metismenu">

  <ul>

    <li>
      <a href="home2.html" class="active">
        Overview
      </a>
    </li>

    <li>
      <a href="#">
        Student
      </a>
    </li>


    <li>
      <a href="#">
        Teacher
      </a>
    </li>
  </ul>

</div>

【讨论】：