Текст не будет отображаться под кнопкой - PullRequest
Новая
       26

Текст не будет отображаться под кнопкой

0 голосов
/ 11 апреля 2019

У меня есть кнопка (стрелка), которая имеет эффект наведения, при котором она предназначена для отображения текста под ней.Я не могу заставить его работать - все на месте, чтобы это раскрылось, и оно есть, когда я проверяю это, но оно просто не видно.

Любая помощь будет оценена 

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

1 Ответ

0 голосов
/ 11 апреля 2019

Это опечатка, измените #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>
...