悬停显示工具提示

Question

我一直在尝试让这个文本在鼠标悬停在箭头上时淡入。运气不好，坚持了一段时间 - 非常感谢任何帮助。

此外，如果我让这个从按钮的左侧到右侧淡入，会包含 JS 吗？

.fa-long-arrow-alt-left {
  display: none; 
  position: absolute; 
  top: 3vh; 
  left: 3vw; 
  z-index: 99; 
  border: none; 
  outline: none; 
  background: none; 
  color: black; 
  cursor: pointer; 
  padding: 15px; 
  font-size: 18px; 
}

.return-text {
  visibility: hidden;
  width: 120px;
  color: black;
  text-align: center;
  justify-content: center;
  
  /* Position the tooltip */
  position: relative;
  z-index: 1;
  left: 20%;

}

#return:hover {
  color: red;
}

#return:hover .return-text {
  visibility: visible;
  transition: 1s ease-in-out;
}

<html>
<head>
 <title>Hector's Portfolio</title>
 <link rel="stylesheet" type="text/css" href="css/style.css">
 <!-- Linking social icons -->
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>

<body>
<button id="return" class="fas fa-long-arrow-alt-left"><span class="return-text">Return</span> 
</button>
</body>

Answer 1

添加不透明度过渡，因为您无法过渡可见性或显示。

您有适当的过渡，所以只需添加不透明度。

至于从左到右的动画，我相信你可以用 css 动画来做到这一点，看看这个例子： CSS fade left to right

.fa-long-arrow-alt-left {
  display: none;
  position: absolute;
  top: 3vh;
  left: 3vw;
  z-index: 99;
  border: none;
  outline: none;
  background: none;
  color: black;
  cursor: pointer;
  padding: 15px;
  font-size: 18px;
  transition: 0.3s ease;
}

.return-text {
  visibility: hidden;
  opacity: 0;
  width: 120px;
  color: black;
  text-align: center;
  justify-content: center;
  /* Position the tooltip */
  position: relative;
  z-index: 1;
  left: 20%;
}

#return:hover {
  color: red;
}

#return:hover .return-text {
  visibility: visible;
  opacity: 1;
  transition: 1s ease-in-out;
}

<html>

<head>
  <title>Hector's Portfolio</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <!-- Linking social icons -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>

<body>
  <button id="return" class="fas fa-long-arrow-alt-left"><span class="return-text">Return</span> 
</button>
</body>

悬停显示工具提示

Hover revealing tooltip

html

css

fadein