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

Posted 2023-03-07

【中文标题】在侧边栏导航中更改自定义形状的悬停样式

【英文标题】：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>

【参考方案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>