当元素悬停时，css 中的悬停不起作用
[英]hover in css have does no effect when element is hoverd
问题描述
所以我制作了一堆相互堆叠的 div，我希望每个 div 在悬停时改变它的背景颜色，但事实并非如此
当我悬停一个项目时，它的背景颜色应该变成绿色，但即使我写了div.oldiv:hover{background-color: #48FF0D;}它也不起作用
问题可能出在 CSS 代码中。
这是一个片段：
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; }
<body> <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; } window.onload = function (){ document.getElementById("bigdiv").innerHTML = b; document.getElementById("bigdiv2").innerHTML = k; } 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"> </div> <div id="bigdiv2"> </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>
不要谈论所有的 Javascript，它只是生成元素并将它们添加到 HTML
2 个解决方案
解决方案1
0 已采纳 2017-06-16 17:33:32
我不知道这段代码的目的是什么，但我想我已经修复了它......不管它是什么：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>
解决方案2
-1 2017-06-16 17:28:44
好吧，这里没有使用 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 代码的良好做法。
jQuery悬停问题-最后一个li元素保持悬停
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.