时间戳

首页 > 解决方案 > 移动文本时出现奇怪的伪影

javascript - 移动文本时出现奇怪的伪影

问题描述

HTML

我需要帮助，所以我有这个按钮（还没有文本），当它悬停时，css 缩放会发生过渡，但是它下面的文本必须移动。当这种情况发生时，它会留下这条奇怪的痕迹。令人惊讶的是，它没有显示在代码片段插入工具中。

视频： https ://youtu.be/-gh7mJxFz8o

//Game List
console.log(document.getElementById('close3').style.display);
function showGameList(){
	document.getElementById("gameList").style.display= "block";
	document.getElementById("close1").style.display = "none";
		document.getElementById("close2").style.display = "none";
			document.getElementById("close3").style.display = "none";
}
function closeGameList(){
		document.getElementById("gameList").style.display= "none";
		document.getElementById("close1").style.display = "block";
		document.getElementById("close2").style.display = "block";
			document.getElementById("close3").style.display = "inline";
}
/*fonts*/
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap');
/*general*/
html{
	max-width: 100vw;
	min-width: 100vw;
	width: 100vw;
	overflow-x: hidden;
	height: auto;
}
body{
	width: 100%;
	min-height: 100vh;
	height: auto;
	background-color: black;
	color: white;
	text-decoration: none;
	padding: 0;
	font-family: 'Josefin Sans', sans-serif;
	margin: 0;
}
/*Navbar*/
#nav{
width: 100%;
background-color: black;
position: fixed;
border-bottom: 5px solid gold;
top: 0%;
padding: none;
}
#navLink{
text-decoration: none;
display: inline-block;
width: 22%;
padding: 1%;
transition: 0.5s;
text-align: center;
color: white;
}
#navLink:hover{
	background-color: gold;
	color: black;
}
#navLinkActive{
text-decoration: none;
display: inline-block;
width: 22.5%;
padding: 1%;
transition: 0.5s;
text-align: center;
color: black;
background-color: gold;
}
/*Home page*/
#page{
	height: auto;
	width: auto;
	text-align: center;
}
.joinButton{
	background-color: rgba(0,0,0,0.5);
  border: 5px solid gold;
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 15px;
  transition: 0.5s;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
}
.joinButton:hover{
	background-color: rgba(255,215,0,0.5);
	zoom: 1.25;
}
#homePageBody{
	height: 40vh;
	padding-top: 15vh;
	padding-bottom: 15vh;
}
#homePageBodySpecial{
	height: auto;
	padding-top: 15vh;
	padding-bottom: 15vh;
}
#homePageBody p{
font-size: 20px;
}
.homePageBody1{
padding-top: 15vh;
margin-top: 5vh;
 background-repeat: none;
  background-size: cover;
 background-position: center;
 background: linear-gradient( rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) ),    url('assets/images/backgrounds/background1.png');
}
.homePageBody2{
margin-top: 1vh;
height: auto;
min-height: 40vh;
 background-repeat: none;
background-position: center;
background-size: cover;
 background: linear-gradient( rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) ),    url('assets/images/backgrounds/background2.png');
}
/* Game List */
#gameList{
	display: none;
	border: 5px solid gold;
	border-radius: 5%;
	width: 40vw;
	padding:2.5vw;
	margin-left: auto;
	margin-right: auto;
	background-color: rgba(0,0,0,0.5);
	transition: 1s;
	margin-bottom: 40px;
}
#gameListItem{
	width: 30%;
	display: inline-block;
	height: auto;
}
#gameListItemImg{
	width: 30%;
}
#closeButtonSmall{
	width: 30px;
	border-radius: 50%;
	border:none;
	text-align: center;
	top: 2.5%;
	right: 2.5%;
	position: relative;
	background-color: transparent;
	color: white;
}
#gameListItemFullWidth{
	width: 100%;
}
#counter1{
}
/*Animations*/
<!DOCTYPE html>
<html>
<head>
	<title>AUG</title>
	<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
	<!-- Navbar -->
	<div id="nav">
		<a href="" id="navLinkActive"><div id="navItemActive">Home</div></a>
		<a href="" id="navLink"><div id="navItem">About</div></a>
		<a href="" id="navLink"><div id="navItem">Join</div></a>
		<a href="" id="navLink"><div id="navItem">User Center</div></a>
	</div>
	<!-- Main Body -->
	<div id="page">
	<div id="homePageBody" class="homePageBody1">
		<h1>Aussie Games</h1><br>
		<p>Description</p>
		<button class="joinButton"></button><br>
		<h2>Current Member Count</h2>
		<h3>28</h3>
	</div>
	<div id="homePageBodySpecial" class="homePageBody2">
		<h2 id="close1">What we offer</h2><br>
		<p id="close2">We offer great, inclusive communities, and competent staff for many of the games you know.</p>
		<button id="close3" class="joinButton" onclick="showGameList()">What do we offer</button>
		<div id="gameList" onclick="closeGameList()">
			<div id="gameListItemFullWidth"><p>Click window to close</p></div>
			<div id="gameListItem">
			<img id="gameListItemImg" src="assets/images/gameIcons/FL.png">
			<p>Flashing Lights</p>
			</div>
			<div id="gameListItem">
			<img id="gameListItemImg" src="assets/images/gameIcons/GM.png">
			<p>Garry's Mod</p>
			</div>
			<div id="gameListItem">
			<img id="gameListItemImg" src="assets/images/gameIcons/IF.png">
			<p>Infinite Flight</p>
			</div>
			<div id="gameListItem">
			<img id="gameListItemImg" src="assets/images/gameIcons/KSP.png">
			<p>Kerbal Space Program</p>
			</div>
			<div id="gameListItem">
			<img id="gameListItemImg" src="assets/images/gameIcons/MC.png">
			<p>Minecraft</p>
			</div>
			<div id="gameListItem">
			<img id="gameListItemImg" src="assets/images/gameIcons/P2.png">
			<p>Payday 2</p>
			</div>
			<div id="gameListItem">
			<img id="gameListItemImg" src="assets/images/gameIcons/RB.png">
			<p>Roblox</p>
			</div>
			<div id="gameListItem">
			<img id="gameListItemImg" src="assets/images/gameIcons/SM.png">
			<p>Surving Mars</p>
			</div>
			<div id="gameListItem">
			<img id="gameListItemImg" src="assets/images/gameIcons/TF.png">
			<p>Team Fortress</p>
			</div>
		</div>
	</div>
	</div>
	<script type="text/javascript" src="script.js"></script>
</body>
</html>

标签： javascripthtmlcss

解决方案

推荐阅读