hover in css have does no effect when element is hoverd
Question
So I made a bunch of divs stacked on each other, and I want each div to change its background color whenever its hover, but that's not what happens
When I hover an item its background color should change to green, but it doesn't work even that I wrote div.oldiv:hover{background-color: #48FF0D;}
The problem is probably in CSS code.
Here is a snippet :
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>
Don't word about all the Javascript, its just to generate elements and adding them to HTML
2 answers
solution1
0 ACCPTED 2017-06-16 17:33:32
I have no idea what the purpose of this code is, but I think I have fixed it..... Whatever it is :P
Your #bigdiv and #bigdiv2 percentage height were not working because the height of the document wasn't 100%. So I just added html, body {height:100%;} to fix that.
/* 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>
solution2
-1 2017-06-16 17:28:44
Well, there is no use of Javascript here. I'm not able to understand what problem you're facing but refer here : https://www.w3schools.com/cssref/sel_hover.asp
CSS already has property of hover and can be used like element:hover {your properties inside like whatever event has to be happened on hover} . There is no need to use JS here. Hope this helps.
UPDATE:
I would also suggest you to follow good practice of writing JS code and CSS code in a separate file not in a HTML file.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.