Question

我正在制作的网站上有一些按钮，但是当我将按钮放大时，它们会变宽，但只有前半部分是可点击的，我不知道问题是什么？

这是javascript代码，我认为这不是问题。

// this is where the main JavaScript and some jQuery runs to make the site work

// variable with your'e money
var money = 0;
var totalTimesClicked = 0;


// Hide all buttons
$("#but1").hide();
$("#but2").hide();
$("#but3").hide();
$("#but4").hide();
$("#but5").hide();
$(".codeLines").hide();

// function used to generate money
function getmoney(income) {
    money = money + income;
}

// automatically makes money untill 100 money
window.setInterval(function(){
    if (money < 100) {
        getmoney(0.1);
    }
// automatically makes money untill 500 money
    else if (money > 100 && money < 500) {
        getmoney(0.05)
    }
    document.getElementById("money").innerHTML = Math.round(money*10)/10;
}, 100)

// make the click to make money button appear when you have more money than 10
var buldings1_appear = setInterval(function(){
if (money >= 9) {
$("#but1").slideDown("slow");
}
// make the auto income button appear when you have more money than 20
if (money >= 20) {
$("#but4").slideDown("slow");
}
},1000)

var clickEffect = 1;
// the click to make money function

$("#but1").click(function(){
    getmoney(clickEffect);
    totalTimesClicked = totalTimesClicked + clickEffect;
        document.getElementById("money").innerHTML = Math.round(money*10)/10;
        document.getElementById("totalTimesClicked").innerHTML = totalTimesClicked;
$("#but2").slideDown("slow");
});

// make more money by clicking on button 1
var clicks = 0;
$("#but2").click(function(){
    var cost = 50;
    var multiplyBut1Cost = Math.floor(cost*Math.pow(1.3,clicks));
    if (money >= multiplyBut1Cost) {
        money = money -  multiplyBut1Cost;
        clickEffect = clickEffect + 1;
        clicks = clicks + 1;    
    document.getElementById("money").innerHTML = Math.round(money*10)/10;
    document.getElementById("clickEffect").innerHTML = clickEffect;
    if (clicks >= 5) {
$("#but3").slideDown("slow");
    }
}
var multiplyBut1NextCost = Math.floor(cost * (Math.pow(1.3, clicks)));
    document.getElementById("multiplyBut1Cost").innerHTML=multiplyBut1NextCost;

})

var but3clicks = 0;
$("#but3").click(function(){
    var cost = 1000;
    var multiplyBut1Cost2 = Math.floor(cost*Math.pow(1.2, but3clicks));
    if (money >= multiplyBut1Cost2) {
        money = money -  multiplyBut1Cost2;
        clickEffect = clickEffect + 5;
        but3clicks = but3clicks + 1;    
    document.getElementById("money").innerHTML = Math.round(money*10)/10;
    document.getElementById("clickEffect").innerHTML = clickEffect;
}
var multiplyBut1NextCost = Math.floor(cost * (Math.pow(1.3, but3clicks)));
    document.getElementById("multiplyBut1Cost2").innerHTML=multiplyBut1NextCost;

})

var effect = 0.1;
var but4income = 0;
var but4bought = 0;
var but4spawned = 0;
function buyBut4(){
    var cost = 25;
    var but4cost = Math.floor(cost*Math.pow(1.2,but4bought));
        if(money>=but4cost){
        but4bought = but4bought+1;
        money = money - but4cost;
        but4income = (but4bought + but4spawned) * effect;
        document.getElementById("but4bought").innerHTML = but4bought;
        document.getElementById("money").innerHTML = money;
if (but4bought >= 5) {
    $("#but5").slideDown("slow");
}

}
    var nextCost = Math.floor(cost*Math.pow(1.2,but4bought));
    document.getElementById("but4cost").innerHTML = nextCost;
};

setInterval(function(){
    getmoney((but4bought + but4spawned) * effect)
document.getElementById("money").innerHTML = Math.round(money*10)/10;

},100)

var but5effect = 0.001;
var but5bought = 0;
var but5income = 0;
function buyBut5(){
    var cost = 1000;
    var but5cost = Math.floor(cost*Math.pow(1.4,but5bought));
        if(money>=but5cost){
        but5bought = but5bought+1;
        money = money - but5cost;
        but5income = but5bought * but5effect;
        document.getElementById("but5bought").innerHTML = but5bought;
        document.getElementById("money").innerHTML = money;
        document.getElementById("but5income").innerHTML = Math.round(but5income * 1000)/100;
    };
    var nextCost = Math.floor(cost*Math.pow(1.4,but5bought));
    document.getElementById("but5cost").innerHTML = nextCost;
};

setInterval(function(){
    but4spawned = but4spawned + but5bought * but5effect; 
    but4income = (but4bought + but4spawned) * effect;
    document.getElementById("but4spawned").innerHTML = Math.round(but4spawned*10)/10;
    document.getElementById("but4income").innerHTML = Math.round(but4income * 100)/10;
},100)





 Window.onload = function supportsLocalStorage() {
      try {
        return 'localStorage' in window && window['localStorage'] !== null;
      } catch(e){
        return false;
      }
    }

function saveGame(){
    localStorage.setItem('money', JSON.stringify(money));
}

function loadGame(){
    money = JSON.parse(localStorage.getItem('money'))
    console.log(localStorage.getItem('money'))
    document.getElementById("money").innerHTML = localStorage.getItem("money");
}

function makeMoneySite(){
    $(".buildings").show("slow");
    $(".upgrades").hide("slow");
}

function upgradesSite(){
    $(".buildings").hide("slow");
    $(".upgrades").show("slow");
}

// Window.onload(loadGame());

这是css，我认为问题可能在这里

h1 {
    font-size: 22px;
    font-weight: bold;
}

.resources ul {
    list-style-type: none;
    font-size:18px;
}

.tabs ul li {
    list-style-type: none;
    float: left;
    font-size: 20px;
    font-weight: bold;
    padding-left: 5%;
    position: relative;
}

.saveButton ul{
    padding: 5%;
    width: 60%;
    position: absolute;
    text-align: right;
    font-size: 16px;
    margin-left: 10%;
    margin-bottom: 1%;
    list-style-type: none;
}

.buildings ul {
    list-style-type: none;
    float: left;
}


.buildings button {
    width: 300px;
    height: 64px;
}

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.buildings button .tooltiptext {
    visibility: hidden;
    width: 300px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.buildings button:hover .tooltiptext {
    visibility: visible;
}

或许问题就在这里

<!DOCTYPE html>
<html>
<head>
    <title>Increment</title>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<!-- the header -->
<h1> U will automatically gain 1 money untill you have 100 money and 0.5 money between 200 and 500 money </h1>

<!-- the class with the resources u need to play the game -->
<div class="resources">
<ul>
    <li> Money <span id="money"> 0 </span></li>
    <li> Money made by clicking <span id="totalTimesClicked"> 0 </span></li>
    <li class="codeLines"> Lines of code <span id="linesOfCode"> 0</span></li>
</ul>
</div>

<div class="tabs">
<ul>
<li onclick="makeMoneySite()"> Buildings</li>
<li onclick="upgradesSite()"> Upgrades </li>
<li> Prestige </li>
</ul>
</div>

<div class="saveButton">
<ul>
    <li> <button onclick="saveGame()"> Save your progress</button> </li>
    <li> <button onclick="loadGame()"> Load a previous game</button> </li>
</ul>
</div>

<br>
<br>

<!-- class with the first row of buttons -->
<div class="buildings">
<ul class="clickerBuildings">
<!-- the click to make money button with the tooltip inside of it -->
    <li>
        <button id="but1"> Click here to make money <p class="tooltiptext">By clicking here u make <span id="clickEffect"> 1 </span> money per click</p></button>
    </li>

<!-- the button to make the click button more effecient with the tooltip inside of it -->
    <li>
        <button id="but2"> Make the click button better <p class="tooltiptext"> Click here to make 1 more money per click on the click button above at the cost of <span id="multiplyBut1Cost"> 50 </span> money </p></button>
    </li>

<!-- the button to make the click button super effecient with the tooltip inside -->
    <li>
        <button id="but3"> Make the click button even better! <p class="tooltiptext"> Click here to make 5 more money per click on the click button above at the cost of <span id="multiplyBut1Cost2"> 1000 </span> money </p> </button>
    </li>
</ul>


<ul class="autoincome">
    <li>
        <button id="but4" onclick="buyBut4()"> Click this to make automatic income <p class="tooltiptext">The automatic income costs <span id="but4cost"> 25 </span> <br> You have bought <span id="but4bought">0 </span> automatic income machines and spawned <span id="but4spawned"> 0 </span> but4's <br> But4 total income <span id="but4income"> 0</span> per second</p></button>
    </li>

    <li>
        <button id="but5" onclick="buyBut5()"> Click here to spawn but4's <p class="tooltiptext"> The but5 costs <span id="but5cost"> 1000 </span> <br>Your <span id="but5bought"> 0 </span> but5's spawns <span id="but5income"> 0 </span> but4's per second </p></button>
    </li>
</ul>

</div>







<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>

Answer 1

这里有很多事情，还有很多问题。但是原因某些按钮看起来不可点击是因为你已经搞砸了＃34;结构和造型。

您的saveButton元素仅包含absolute个定位元素（因此此父级不会清除并位于＆＃34;大按钮＆＃34;父元素之上），其中包含li定位的子元素（block）且＆＃34;溢出＆＃34; ＆＃34;大按钮＆＃34;可点击区域。

老实说，每个问题都有很多问题需要花费太长时间。

要解决您的问题，请点击＆＃34;问题你有几个选择：

对于大按钮，添加position: relative; z-index: 99或任何更高的z-index值 - 这可能会阻碍元素的z定位。
对于.saveButton ul元素，请移除position: absolute
对于.saveButton ul > li元素，请添加display: inline-block

其中一个将解决您的问题，但我强烈建议您重新评估html结构和css样式。

Fiddle 使用上述技术之一。

Answer 2

问题在于您ul的定位包含保存游戏和加载上一个游戏链接。

<ul>
  <li> <button onclick="saveGame()"> Save your progress</button> </li>
  <li> <button onclick="loadGame()"> Load a previous game</button></li>
</ul>

无序列表覆盖在按钮上。在下图中，您可以看到无序列表的边界，它位于按钮的顶部。这就是为什么你无法正确点击前四个按钮的原因。

要解决此问题，请正确定位ul。我建议你先改变页面的结构。如果您对它感到满意，请删除ul元素上的绝对位置。在不删除position:absolute的情况下，临时修复将是

.saveButton ul{
    margin-top:20%;
}

注意：如果在Developer Tools中使用Inspect Element，则可以找到每个DOM元素的边界。

为什么我的按钮只有一半有效？

2 个答案: