gpt4 book ai didi

javascript - Hide::before 悬停在事件元素上

转载 作者:行者123 更新时间:2023-11-28 12:40:17 24 4
gpt4 key购买 nike

我有这样的结构:

<nav>
<ul>
<li><a href="javascript:void(0)" class="menuitem active">see all projects</a></li>
<li><a href="javascript:void(0)" class="menuitem">about</a></li>
<li><a href="javascript:void(0)" class="menuitem">contact</a></li>
</ul>
</nav>

.active 可以是三者之一时(它只是突出显示用户所在的页面)。问题是我正在通过 ::before 选择器在 .active 元素上创建一个“箭头”突出显示,我希望如果用户将鼠标悬停在任何元素上, ::before 仅在悬停时消失。

它是这样的:

http://i.imgur.com/cIZXHEN.png

悬停时看起来像这样(看到问题了吗?现在悬停时有两个箭头,我希望箭头只位于悬停的箭头上并将其隐藏在 .active 上,在 mouseout 之后箭头返回到 .active 一个):

http://i.imgur.com/JTLKNFK.png

这是我的CSS:

header nav {
float: right;
font-family: 'avenir_lt_std65_medium';
text-transform: uppercase;
text-align: right;
font-size: 8px;
line-height: 12px;
letter-spacing: 2px;
color: #000000;
}
header nav ul li a.active::before {
content: ">> ";
}
header nav ul li a:hover:before {
content: ">> ";
}

最佳答案

这会成功吗?

header nav {
float: right;
font-family: 'avenir_lt_std65_medium';
text-transform: uppercase;
text-align: right;
font-size: 8px;
line-height: 12px;
letter-spacing: 2px;
color: #000000;
}
nav ul li a.active::before {
content: ">> ";
}
nav ul:hover li a::before {
content: none;
}
nav ul li a:hover:before {
content: ">> ";
}
<nav>
<ul>
<li><a class="menuitem active">see all projects</a></li>
<li><a class="menuitem">about</a></li>
<li><a class="menuitem">contact</a></li>
</ul>
</nav>

关于javascript - Hide::before 悬停在事件元素上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26549995/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com