悬停揭示工具提示

问题描述 投票:3回答:1

当箭头上出现悬停时,我一直试图让这个文字淡入淡出。没有运气,并且已经坚持了一段时间 - 会感激任何帮助。

此外,如果我从按钮的左侧到右侧淡入,那将包括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>
html css fadein
1个回答
2
投票

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

你有过渡到位,所以只需添加不透明度。

至于从左到右的动画,我相信你可以用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>
© www.soinside.com 2019 - 2024. All rights reserved.