Question

我有一个具有悬停效果的按钮（箭头），该按钮用来显示其下方的文本。我无法使它正常工作-一切都已经准备就绪，可以显示出来，当我检查它时就可以看到它，但是它不可见。

任何帮助将不胜感激

/*Arrow Styling and positioning*/
.fa-long-arrow-alt-up {
  display: none; 
  position: fixed; 
  bottom: 200px; 
  right: 20px; 
  z-index: 99; 
  border: none; 
  outline: none; 
  background: none; 
  color: black; 
  cursor: pointer; 
  padding: 15px; 
  font-size: 18px; 
}
/*Arrow Hover*/
#myBtn:hover {
  color: red; 
  transition: 0.5s;
}
/*Positioning and styling of text under button*/
.up-text {
  visibility: hidden;
  width: 120px;
  color: #000;
  text-align: center;
  padding: 5px 0;
  position: absolute;
  z-index: 99;
  top: 100%;
  left: 50%;
  margin-left: -60px;
}
/*Reveals the text when hovered over*/
.myBtn:hover .up-text {
  visibility: visible;
  color: #000;
}

<!DOCTYPE html>
<html>
<head>
	<title>Hector's Portfolio</title>
	<!-- CSS style sheet -->
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<!-- Scaling debending on device -->
  <!-- J-Query style sheet -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<!-- JS style sheet -->
	<script src="js/javascript.js"></script>
<!-- Linking social icons -->
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
	<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- Button to go to top -->
	<button onclick="topFunction()" id="myBtn" class="fas fa-long-arrow-alt-up"><span class="up-text">Up?</span></button>
</body>

Answer 1

这是拼写错误，悬停时更改#myBtn而不是.myBtn

#myBtn:hover .up-text {
  visibility: visible;
  color: #000;
}

/*Arrow Styling and positioning*/
.fa-long-arrow-alt-up {
  display: none; 
  position: fixed; 
  bottom: 200px; 
  right: 20px; 
  z-index: 99; 
  border: none; 
  outline: none; 
  background: none; 
  color: black; 
  cursor: pointer; 
  padding: 15px; 
  font-size: 18px; 
}
/*Arrow Hover*/
#myBtn:hover {
  color: red; 
  transition: 0.5s;
}
/*Positioning and styling of text under button*/
.up-text {
  visibility: hidden;
  width: 120px;
  color: #000;
  text-align: center;
  padding: 5px 0;
  position: absolute;
  z-index: 99;
  top: 100%;
  left: 50%;
  margin-left: -60px;
}
/*Reveals the text when hovered over*/
#myBtn:hover .up-text {
  visibility: visible;
  color: #000;
}

<!DOCTYPE html>
<html>
<head>
	<title>Hector's Portfolio</title>
	<!-- CSS style sheet -->
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<!-- Scaling debending on device -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
  <!-- J-Query style sheet -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<!-- JS style sheet -->
	<script src="js/javascript.js"></script>
<!-- Linking social icons -->
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
	<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- Button to go to top -->
	<button onclick="topFunction()" id="myBtn" class="fas fa-long-arrow-alt-up"><span class="up-text">Up?</span></button>
</body>

文字不会显示在按钮下方

1 个答案: