var totalMoney = 0;
var clickMultiplier = 1;
var incomeSecond = 0;
var totalVirus = 0;
var totalTrojan = 0;
var totalWorm = 0;
var totalServer = 0;
function totalMoneyText() {
totalMoney = totalMoney + 1 * clickMultiplier;
}
setInterval(function() {
totalMoney = incomeSecond + totalMoney;
incomeSecond = (totalWorm) + (totalTrojan * 2) + (totalVirus);
}, 1000);
setInterval(function() {
updateText();
}, 100);
setInterval(function() {
totalTrojan = totalTrojan * 1.001;
totalWorm = totalWorm * 1.01;
}, 5000);
function updateText() {
document.getElementById("totalMoney").innerHTML = totalMoney.toLocaleString("en-US", {
style: "currency",
currency: "USD",
maximumFractionDigits: 0
});
document.getElementById("buyablenum1").innerHTML = Math.round(totalVirus * 1000) / 1000;
document.getElementById("buyablenum2").innerHTML = Math.round(totalTrojan * 1000) / 1000;
document.getElementById("buyablenum3").innerHTML = Math.round(totalWorm * 1000) / 1000;
}
function buyable1() {
if (totalMoney > 49) {
totalMoney = totalMoney - 50;
totalVirus = totalVirus + 1;
} else {
window.alert("You don't have enough to buy that!")
}
}
function buyable2() {
if (totalMoney > 149) {
totalMoney = totalMoney - 150;
totalTrojan = totalTrojan + 1;
} else {
window.alert("You don't have enough to buy that!")
}
}
function buyable3() {
if (totalMoney > 499) {
totalMoney = totalMoney - 500;
totalWorm = totalWorm + 1;
} else {
window.alert("You don't have enough to buy that!")
}
}
function buyable4() {
if (totalMoney > 99) {
totalMoney = totalMoney - 100;
totalServer = totalServer + 1;
} else {
window.alert("You don't have enough to buy that!")
}
}@font-face{
font-family:HackingT;
src:url(assets/HackingTrashed-Regular.ttf);
}
@font-face{
font-family:Currency;
src:url(assets/Currency.ttf);
}
@font-face{
font-family:Hacker;
src:url(assets/Hacker.tff);
}
body,
html {
overflow-x:hidden;
overflow-y:hidden;
}
html {
background:url(assets/background.png) no-repeat center center fixed;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
head {} body {} #meme {
color:transparent;
}
.globalcontainer {
position:relative;
margin:0% 0;
min-height:100vh;
}
.buyablecontainer {
position:relative;
z-index:2;
}
.clickablecontainer {
margin:26.5% auto;
position:relative;
z-index:2;
}
#Money {
font-size:50px;
color:whitesmoke;
text-align:center;
font-family:"HackingT";
text-shadow:1px 1px grey;
margin:0 auto;
}
#totalMoney {
font-size:40px;
color:whitesmoke;
text-align:center;
font-family:"Currency";
letter-spacing:3px;
text-shadow:1px 1px grey;
margin:0 auto;
}
.column {
position:absolute;
}
.buyImg {
width:15%;
border:2px grey solid;
}
.noselect {
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
cursor:default;
}
#imgComputer {
width:15%;
}
.clickable {
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
cursor:default;
-webkit-user-drag:auto | element | none;
-moz-user-select:none | text | all | element -ms-user-select:none | text | all | element
}
.number {
color:snow;
padding:1px;
}
#buyImg:active {} .buyable1 {
position:relative;
}
.tooltip {
position:absolute;
margin:0% 1%;
padding:14% 44%;
border:4px grey solid;
background-color:black;
background-blend-mode:difference;
}
.tooltipheader {
font-family:"Hacker";
color:forestgreen;
position:absolute;
display:inline;
top:-10%;
left:0;
}
.tooltiptext {
color:forestgreen;
position:absolute;
font-family:"Hacker";
display:inline;
text-align:center;
font-size:15px;
left:0%;
top:50%
}
.tooltipincome {
position:absolute;
font-size:20px;
left:5%;
margin:-13% 24%;
font-family:"Hacker";
color:forestgreen;
}
#tooltip1 {
display:none;
}
#tooltip2 {
display:none;
}
#tooltip3 {
display:none;
}
#tooltip4 {
display:none;
}
#virus:hover~#tooltip1 {
display:inline;
}
#trojan:hover~#tooltip2 {
display:inline;
}
#worm:hover~#tooltip3 {
display:inline;
}
#server:hover~tooltip4 {
display:inline;
}
#server {
width:25%;
padding:1%;
}<!DOCTYPE html>
<html>
<head>
<title>Hacker Clicker</title>
<link rel=stylesheet type="text/css" href="styles.css" />
<script type="text/javascript" src="scripts.js"></script>
<script src="http://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body class=noselect>
<div class=globalcontainer>
<div class="header">
<a id=meme href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Click me</a>
<h1 class=noselect id=Money>Money</h1>
<h1 class=noselect id=t otalMoney>$0</h1>
</div>
<!-- Numbers and Buyables -->
<div class="container buyablecontainer noselect">
<div class="column">
<div class="buyable1">
<h2 class=number id=buyablenum1>0</h2>
<img draggable="false" id=virus onclick="buyable1()" class=buyImg src="assets/virus.png" />
<div id=tooltip1 class=tooltip>
<h1 class=tooltipheader>"Virus"</h1>
<h2 class=tooltipincome>Income: $1 per second Price:50</h2>
<p class=tooltiptext>A virus tries to infect anyone and everyone that it can, it's usually used as a way to collect revunue through email spam, aswell to fuck your life up.</p>
</div>
</div>
<div class="buyable2">
<h2 class=number id=buyablenum2>0</h2>
<img draggable="false" id=trojan onclick="buyable2()" class=buyImg src="assets/trojan.png" />
<div id=tooltip2 class=tooltip>
<h1 class=tooltipheader>"Trojan"</h1>
<h2 class=tooltipincome>Income:$2 per second 0.01% replication Price:150</h2>
<p class=tooltiptext>A trojan creates a backdoor to your computer and gives confidential or personal information to the creator.</p>
</div>
</div>
<div class="buyable3">
<h2 class=number id=buyablenum3>0</h2>
<img draggable="false" id=worm onclick="buyable3()" class=buyImg src="assets/worm.png" />
<div id=tooltip3 class=tooltip>
<h1 class=tooltipheader>"Worm"</h1>
<h2 class=tooltipincome>Income:$1 per second 1% replication Price:500</h2>
<p class=tooltiptext>A worm self replicates through the interwebs and lives inside everyone which it is allowed. They are used to do any ill-biddings that the creator wants.</p>
</div>
</div>
<div class="buyable4">
<h2 class=number id=buyablenum4>0</h2>
<img draggable="false" id=server onclick="buyable4()" class=buyImg src="assets/server.png" />
<div id=tooltip4 class=tooltip>
<h1 class=tooltipheader>"Server"</h1>
<h2 class=tooltipincome>Income:$0 +2 on click Price:100</h2>
<p class=tooltiptext>The more servers you got, the more you can hack. Get it foo?</p>
</div>
</div>
</div>
</div>
<div class=clickablecontainer align="center">
<img draggable="false" onclick="totalMoneyText()" id=imgComputer class=clickable src="assets/hacking.gif" />
</div>
</div>
</body>
</html>Jsfiddle What's supposed to show up
对于无法看到图像，我提前表示歉意，但是如果您尝试将鼠标悬停在左侧的 4 个图标上，除了最后一个图标之外它们都可以工作，希望这不是一个简单的错误，因为我开始使用 HTML CSS 和Javascript 2 天前，但这是完全可能的，如果是这样的话，我很抱歉:p。
另外，我很难用 CSS 将事物准确定位在我想要的位置，例如，如果我想在中心放置一个图像，而不管它周围有什么，我该怎么做？ 有什么建议吗？
最佳答案
CSS 中的拼写错误。
#server:hover~tooltip4 {
应该阅读
#server:hover~#tooltip4 {
这里有许多重构的可能性 - 快乐学习!
关于javascript - 单次悬停不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38757453/