如何解决如何使三角形悬停在指定元素上?
我有两个部分的导航栏。左侧是徽标图片。右侧栏由4个列表元素组成。我希望三角形出现在悬停的元素的底部。我将列表向右浮动。现在,我在前后尝试了伪类元素。但是三角形固定在任何悬停的元素上。我尝试更改所有参数,但随后整个栏都改变了。
<html>
<head>
<meta name="viewport"
content="width=device-width,initial-scale=1">
<style>
#navlist {
background-color: black;
position: absolute;
width: 100%;
padding-bottom: 0 px;
}
#navlist a {
float:left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 10px;
text-decoration: none;
font-size: 15px;
margin-bottom: 0px;
outline: none;
}
.navlist-right a:hover:before {
content: "";
position: absolute;
top: 40px;
left: 50%;
margin-left: -15px;
width: 0px;
height 0px;
xxmargin: 0px auto;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid black;
}
.navlist-right a:hover:after {
content: "";
position: absolute;
top: 40px;
left: 50%;
margin-left: -15px;
width: 0px;
height 0px;
xxmargin: 0px auto;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 12px solid white;
}
.navlist-right{
width:20%;
float:right;
font-weight: bolder;
padding-bottom: 0 px;
}
#navlist a:hover {
color : #f2f2f2;
}
</style>
</head>
<body>
<!-- Navbar items -->
<div id="navlist">
<ul>
<li class="navlist-left">
<a href="#">
<span class="span-logo">
<img src="/home/sahanaswamy/Downloads/logo.png" />
</span>
</a>
</li>
</ul>
<div class="navlist-right">
<a href="#">Home</a>
<a href="#">Work</a>
<a href="#">Us</a>
<a href="#">Contact</a>
</div>
</div>
</body>
</html>
我应该更改after after属性吗?如果我尝试更改hover元素的top和left属性,则三角形将最终处于固定状态。
解决方法
您必须在const MyComponent = ({ name,width,title }) =>
<div class={`main-${name} ${width && 'default-width'}`}>
{title && <span>{title}</span>}
<span> hello </span>
</div>
标签上使用position: relative
。
a
#navlist { display: flex;
justify-content: space-between;
align-items: center;
background-color: black;
position: absolute;
width: 100%;
padding-bottom: 0 px;
}
#navlist a {
position: relative;
display: block;
color: #f2f2f2;
text-align: center;
padding: 10px;
text-decoration: none;
font-size: 15px;
margin-bottom: 0px;
outline: none;
}
.navlist-right a:hover:before {
content: "";
position: absolute;
top: 40px;
left: 50%;
margin-left: -15px;
width: 0px;
height 0px;
xxmargin: 0px auto;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid #fff;
}
.navlist-right{
display: inline-flex;
font-weight: bolder;
padding-bottom: 0 px;
}
#navlist a:hover {
color : #f2f2f2;
}
,
您忘记将position: relative
添加到a
元素中。
#navlist a {
position: relative;
...
}
由于对position: absolute
和:before
伪元素使用了:after
属性,因此具有的元素将从页面流中移除,并将其放置到最接近的祖先位置。
有关更多详细信息:How to use CSS Position property
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。