Question

我在项目中使用“悬停”但是当我将鼠标放在项目上时没有任何结果这是我的项目

<html>
  <head>
    <meta charset="utf-8" />
    <script>
    var b = "",k = "",a,q,d;
    for(a = 0;a<=256;a++){
      d ="    <div id=\"du\" class=\"oldiv\" style=\"background-color: rgb("+a+","+a+","+a+");\"></div>";
      q ="    <div id=\"du\" class=\"oldiv\" style=\"background-color:rgb("+(256-a)+","+(256-a)+","+(256-a)+");\"></div>";
      b = b+"\n"+d;
      k = k+"\n"+q;
    }
    function utd(a){
        var bigdiv = document.getElementById("bigdiv");
        var bigdiv2 = document.getElementById("bigdiv2");
        if(a == 0){
            bigdiv.style.height = "0";
            bigdiv2.style.height= "90%";
        }else{
            bigdiv.style.height = "90%";
            bigdiv2.style.height= "0";
        }
    }
  </script>
    <style>
    body{background-color: #48FF0D;}
    #bigdiv {height: 90%;width: 100%;}
    .oldiv {height: 0.390625%;width: 100%;}
    div.oldiv:hover{background-color: #48FF0D;}
    #bigdiv2 {height: 0;width: 100%;}
    .btn {border: none;color: white;padding: 14px 28px;cursor: pointer;}
    .uptodown {background-color: #e7e7e7; color: black;}
    .uptodown:hover {background: #ddd;}
    .l{float: right;}
    </style>
  </head>
  <body>
    <div id="bigdiv">
      <script>document.write(b);</script>
    </div>
    <div id="bigdiv2">
      <script>document.write(k);</script>
    </div>
    <div>
      <button class="btn uptodown" onclick="utd(0)">white to black</button>
      <button class="btn uptodown l" onclick="utd(1)">black to white</button>
  </div>
  </body>
</html>

当我将鼠标放在项目上时，他的背景颜色变为绿色因为我写了div.oldiv:hover{background-color: #48FF0D;} 我想我需要使用jquery

由于此问题，请帮助我停止在此项目中编码

Answer 1

我不知道这段代码的目的是什么，但我想我已经修好了.....不管它是什么：P

您的#bigdiv和#bigdiv2百分比高度不起作用，因为文档的高度不是100％。所以我刚刚添加html, body {height:100%;}来解决这个问题。

/* code added START */
html, body {
  height:100%;
}
div.oldiv:hover {
  background-color: #48FF0D!important;
}
/* code added END */
body{
  background-color: #48FF0D;
}
#bigdiv {
  height: 90%;
  width: 100%;
}
.oldiv {
  height: 0.390625%;
  width: 100%;
}
/* div.oldiv:hover{background-color: #48FF0D;} */
#bigdiv2 {
  height: 0;
  width: 100%;
}
.btn {
  border: none;
  color: white;
  padding: 14px 28px;
  cursor: pointer;
}
.uptodown {
  background-color: #e7e7e7; 
  color: black;
}
.uptodown:hover {
  background: #ddd;
}
.l {
  float: right;
}

<script>
var b = "",k = "",a,q,d;
for(a = 0;a<=256;a++){
  d ="    <div id=\"du\" class=\"oldiv\" style=\"background-color: rgb("+a+","+a+","+a+");\"></div>";
  q ="    <div id=\"du\" class=\"oldiv\" style=\"background-color:rgb("+(256-a)+","+(256-a)+","+(256-a)+");\"></div>";
  b = b+"\n"+d;
  k = k+"\n"+q;
}
function utd(a) {
  var bigdiv = document.getElementById("bigdiv");
  var bigdiv2 = document.getElementById("bigdiv2");
  if(a == 0) {
    bigdiv.style.height = "0";
    bigdiv2.style.height= "90%";
  } else {
    bigdiv.style.height = "90%";
    bigdiv2.style.height= "0";
  }
}
</script>

<div id="bigdiv">
  <script>document.write(b);</script>
</div>
<div id="bigdiv2">
  <script>document.write(k);</script>
</div>
<div>
  <button class="btn uptodown" onclick="utd(0)">white to black</button>
  <button class="btn uptodown l" onclick="utd(1)">black to white</button>
</div>

Answer 2

嗯，这里没有使用Javascript。我无法理解您遇到的问题，但请参阅此处：https://www.w3schools.com/cssref/sel_hover.asp

CSS已具有hover的属性，可以像element:hover {your properties inside like whatever event has to be happened on hover}一样使用。这里没有必要使用JS。希望这会有所帮助。

更新：

我还建议你遵循在不在HTML文件中的单独文件中编写JS代码和CSS代码的良好实践。

使用javascript在css中悬停

2 个答案: