gpt4 book ai didi

html - 悬停文本覆盖上的奇怪文本阴影/双文本

转载 作者:太空宇宙 更新时间:2023-11-04 06:07:06 30 4
gpt4 key购买 nike

我在一个网站上工作,我试图让左侧的导航栏图标在悬停时更改为文本。我能够让它工作,但出于某种奇怪的原因,每当你离开悬停时,一瞬间,你会看到该文本 - 带下划线和紫色! - 到一边。它不会停留很长时间,但它非常引人注目,我终究无法弄清楚它是从哪里来的。我尝试删除名称属性,但那没有做任何事情。有人可以帮我弄清楚如何摆脱这些吗?

这是我的代码:

https://codepen.io/anon/pen/dBzzJo

* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border: none;
}

body {
background-color: #242424;
height: 100vh;
}

.vertical-nav-bar {
width: 100px;
height: 100vh;
background-color: #1a1a1a;
}

.name-logo {
height: 13%;
display: block;
padding: 20px;
margin: auto;
padding-bottom: 10px;
}

.vertical-nav-bar span {
color: white;
font-size: 13px;
padding: 28px;
}

.logo {
margin-bottom: 55px;
}

.icon {
color: #4b4747;
display: block;
text-decoration: none;
padding: 20px 35px 20px 35px;
font-size: 25px;
}

#icon-text {
position: relative;

}

#icon-text .image,
#icon-text .text {
transition: opacity 0.25s ease-in-out;
}

#icon-text .text {
position: absolute;

opacity: 0;
}

#icon-text:hover .icon{
opacity:0;
}

#icon-text:hover .text {
opacity:1;
color: #08fdd8;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
text-decoration: none;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Portfolio</title>
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<script src="https://unpkg.com/ionicons@4.5.10-1/dist/ionicons.js"></script>
<link rel="stylesheet" type="text/css" href="text.css">
<script src="fatima.js"></script>
</head>
<body>
<header>
<nav>
<div class="row">
<div class="col span-1-of-2 vertical-nav-bar">
<div class="logo">
<a href="https://fontmeme.com/3d-fonts/"><img class="name-logo" src="https://fontmeme.com/permalink/190622/9ca35e17317443d5cf13059d037bd9e7.png" alt="3d-fonts" border="0"><span>Name</span></a>
</div>
<div id="icon-text">
<a href="#"><ion-icon class="icon" name="home"></ion-icon></a>
<a href="#" class="text">Home</a>
</div>
<div id="icon-text">
<a href="#"><ion-icon class="icon" name="person"></ion-icon></a>
<a href="#" class="text">About</a>
</div>
<div id="icon-text">
<a href="#"><ion-icon class="icon" name="list-box"></ion-icon></a>
<a href="#" class="text">Skills</a>
</div>
<div id="icon-text">
<a href="#"><ion-icon class="icon" name="eye"></ion-icon></a>
<a href="#" class="text">My Work</a>
</div>
<div id="icon-text">
<a href="#"><ion-icon class="icon" name="mail"></ion-icon></a>
<a href="#" class="text">Contact</a>
</div>
<div id="icon-text">
<a href="#"><ion-icon class="icon" name="logo-linkedin"></ion-icon></a>
<a href="#" class="text">Linked In</a>
</div>
</div>
</div>
</nav>
</header>
</body>
</html>

最佳答案

1.) 删除双链接 - 仅文本上的链接就足够了

2.) 将所有位置、颜色等属性从 hover 规则移至常规状态的规则,包括图标和文本。否则,常规状态将在淡出时/切换到默认设置(这就是您所看到的)

https://codepen.io/anon/pen/BgdwQP

* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border: none;
}

body {
background-color: #242424;
height: 100vh;
}

.vertical-nav-bar {
width: 100px;
height: 100vh;
background-color: #1a1a1a;
}

.name-logo {
height: 13%;
display: block;
padding: 20px;
margin: auto;
padding-bottom: 10px;
}

.vertical-nav-bar span {
color: white;
font-size: 13px;
padding: 28px;
}

.logo {
margin-bottom: 55px;
}

.icon {
color: #4b4747;
display: block;
text-decoration: none;
padding: 20px 35px 20px 35px;
font-size: 25px;
}

#icon-text {
position: relative;

}

#icon-text .icon,
#icon-text .text {
transition: opacity 0.25s ease-in-out;
}

#icon-text .text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
color: #08fdd8;
opacity: 0;
text-decoration: none;
}

#icon-text:hover .icon{
opacity:0;
}

#icon-text:hover .text {
opacity:1;
}
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Portfolio</title>
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<script src="https://unpkg.com/ionicons@4.5.10-1/dist/ionicons.js"></script>
<link rel="stylesheet" type="text/css" href="text.css">
<script src="fatima.js"></script>
</head>

<body>
<header>
<nav>
<div class="row">
<div class="col span-1-of-2 vertical-nav-bar">
<div class="logo">
<a href="https://fontmeme.com/3d-fonts/"><img class="name-logo" src="https://fontmeme.com/permalink/190622/9ca35e17317443d5cf13059d037bd9e7.png" alt="3d-fonts" border="0"><span>Name</span></a>
</div>
<div id="icon-text">

<ion-icon class="icon" name="home"></ion-icon>
<a href="#" class="text">Home</a>
</div>
<div id="icon-text">
<ion-icon class="icon" name="person"></ion-icon>
<a href="#" class="text">About</a>
</div>
<div id="icon-text">
<ion-icon class="icon" name="list-box"></ion-icon>
<a href="#" class="text">Skills</a>
</div>
<div id="icon-text">
<ion-icon class="icon" name="eye"></ion-icon>
<a href="#" class="text">My Work</a>
</div>
<div id="icon-text">
<ion-icon class="icon" name="mail"></ion-icon>
<a href="#" class="text">Contact</a>
</div>
<div id="icon-text">
<ion-icon class="icon" name="logo-linkedin"></ion-icon>
<a href="#" class="text">Linked In</a>
</div>
</div>
</div>
</nav>
</header>
</body>

</html>

关于html - 悬停文本覆盖上的奇怪文本阴影/双文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56758728/

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