问题描述
我有一个问题,我实际上是在 HTML 和预处理器 SASS 中创建一个简单的登录页面,并且在我的 nav 元素中,我有一个 (ul) 元素 包含4 (li) 元素,并且在它们中间有一个链接标签(a),我的HTML 如下所示:>
<!-- NAVBAR -->
<nav>
<!-- LIST -->
<ul class="list_items">
<!-- ITEMS -->
<li class="item"><a href="">Home</a></li>
<li class="item"><a href="">Our app</a></li>
<li class="item"><a href="">Contact</a></li>
<li class="item active_button"><a href="">Sign up</a></li>
</ul>
</nav>
我创建了一个 (li)::after 伪元素,然后我用绝对位置定位它们,然后我有相对于 (li) 元素的位置:
-(li) 元素样式:
li {
list-style: none;
position: relative;
的样式 (li) ::after 伪元素,带有 :not 伪类不将样式应用于最后一个 (li) 项目,该项目具有附加类来抓取它(.active_button):
&::after:not(.active_button){
content: "";
height:10%;
width:0;
background:linear-gradient(45deg,#8d56c0 60%,#417be7);
position: absolute;
bottom:-25%;
right:calc(20% - 2px);
transition: width .25s linear;
}
默认情况下after伪元素的宽度为0(不可见),当用户悬停在(li) ,必须转换为 60% 的宽度以使其可见:
&:hover::after{
width:calc(60% + 4px);
}
一些便于理解的视觉效果:
-默认导航:
-当用户悬停在 (li) 元素上时的 Nav(例如 HOME):
问题是当我没有指定 :not() 伪类时,after 元素最后应用于所有 li 元素事件(我不想要它,因为它是具有特殊样式的按钮) 和 如果我指定 :not(.active_button) 尝试不触摸最后一个 li(按钮登录),所有 ::after 不显示/工作,什么也没有发生。
PS:我使用的是 SASS 预处理器,也许我没有把选择器放在合适的位置,所有嵌套的元素 SASS 很难阅读,但那会让我感到惊讶,因为悬停正在起作用..
我们感兴趣的一方的所有 Sass 代码:
li {
list-style: none;
position: relative;
&:hover::after{
width:calc(60% + 4px);
}
&::after{
content: "";
height:10%;
width:0;
background:linear-gradient(45deg,#417be7);
position: absolute;
bottom:-25%;
right:calc(20% - 2px);
transition: width .25s linear;
}
a {
text-decoration: none;
font-size: 1.5em;
padding: .5em 1.5em;
font-weight: 300;
color: #8b4cc5;
}
}
.active_button {
a {
background-color: #01709c;
color: white;
border-radius: 12.5px;
}
}
我不知道为什么?
谢谢。
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)