Question

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定位到我想要的位置，例如，如果我想在中心放置一个图像，无论它周围是什么，我该怎么做？有什么提示吗？

Answer 1

CSS中的错字。

#server:hover~tooltip4 {

应该阅读

#server:hover~#tooltip4 {

这里有许多重构可能性 - 快乐学习！

奇异的悬停不起作用

1 个答案: