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

Question

我设计了一个自定义的圆形形状（带有边框），以陪伴我的侧边栏导航链接。

但是在将鼠标悬停或激活时无法创建所需的悬停样式，如下所示：

true

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

Answer 1

看看我在代码段中添加的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>

Answer 2

这是一个不错的起点。您可以利用np.einsum('ij,ik,kj->j',xy,W,xy, optimize=True) 插入自己的圈子。这样做的好处是，如果用户需要复制文本，则不能复制/选择它。

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

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