Question

我在一个网站上工作，我试图将左侧的导航栏图标更改为悬停时的文本。我能够使它正常工作，但是由于某些奇怪的原因，每当您将鼠标悬停时，会瞬间看到该文本-带下划线的紫色！ -到一边。它不会停留很长时间，但是非常引人注目，我无法终生弄清楚它的来源。我尝试删除名称属性，但没有做任何事情。有人可以帮我弄清楚如何摆脱这些吗？

这是我的代码：

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>

Answer 1

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>

Answer 2

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

Answer 3

这是因为您要在悬停状态下设置许多属性，但是应该为默认状态定义这些属性。因此，一旦鼠标移出，这些悬停规则就会消失，但是过渡动画仍在运行。

我只剩下了对悬停状态至关重要的内容，请查看它的运行情况：

* {
    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;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
    text-decoration: none;
    opacity: 0;
}

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

#icon-text:hover .text {
    opacity:1;
    color: #08fdd8;
    
}

<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>

悬停文字叠加上的奇怪文字阴影/双重文字

3 个答案: