单一悬停不起作用

Singular hover will not work

本文关键字:不起作用 悬停 单一      更新时间:2023-09-26

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>

Jsfidle应该显示什么

我提前为无法看到图像而道歉,但如果你试图将鼠标悬停在左边的4个图标上,它们除了最后一个图标外都能工作,希望这不是一个简单的错误,因为我两天前开始使用HTMLCSS和Javascript,但这是完全可能的,如果是这样的话,我很抱歉:p。

此外,我很难用CSS将东西准确地定位在我想要的位置,例如,如果我想在中心有一个图像,无论周围有什么,我该怎么做?有什么建议吗?

CSS中的打字。

#server:hover~tooltip4 {

应读取

#server:hover~#tooltip4 {

这里有许多重构的可能性——快乐学习!