:hover
not working after applying :before
and :after
. I'm checking on Chrome. Here's my code :
<style>
* {
margin: 0px;
padding: 0px;
box-shadow: none;
}
body {
background: black;
}
#demoBoard {
position: relative;
margin: 7px auto;
width: 630px;
height: 650px;
background-color: grey;
background-image: radial-gradient(152px at 324px 50%, black, grey 99%);
opacity: 0.9;
border-radius: 10%;
}
#demoBoard h2 {
position: absolute;
color: rgb(243, 100, 20);
text-align: center;
text-shadow: 2px 2px 2px black;
top: 3px;
left: 290px;
-webkit-user-select: none;
}
#Gboard {
position: absolute;
width: 580px;
height: 580px;
background: rgba(0, 0, 0, 0.8);
position: absolute;
border: 5px solid crimson;
box-shadow: 3px 3px 4px black;
top: 34px;
left: 18px;
}
#demoBoard:before {
position: absolute;
content: "";
width: 628px;
height: 648px;
border-left: 1px solid rgb(41, 41, 51);
border-right: 1px solid rgb(41, 41, 51);
border-radius: 10%;
box-shadow: inset 10px 10px 30px black;
left: -1px;
}
#demoBoard:after {
position: absolute;
left: -1px;
top: -2px;
content: "";
width: 631px;
height: 651px;
border-bottom: 1px solid rgb(41, 41, 51);
border-top: 1px solid rgb(41, 41, 51);
border-radius: 10%;
box-shadow: inset -10px -10px 30px black;
}
#Gboard:hover {
cursor: pointer;
}
#Gboard:active {
box-shadow: 1px 1px 2px black;
cursor: pointer;
}
#options {
position: absolute;
top: 200px;
left: 180px;
color: crimson;
font: 20px bold;
background: rgba(123, 123, 123, 0.4);
border-radius: 10%;
width: 250px;
height: 300px;
}
#options:before {
content: "";
position: absolute;
box-shadow: inset 14px 14px 35px black;
border-radius: 10%;
width: 250px;
height: 300px;
}
#options:after {
content: "";
top: 2px;
position: absolute;
box-shadow: inset 0px -14px 35px black;
border-radius: 10%;
width: 250px;
height: 300px;
}
#options p {
position: absolute;
top: 12px;
left: 210px;
color: crimson;
font-size: 30px;
text-shadow: 0px 1px 1px black;
}
#options p:hover {
cursor: pointer;
}
#options ul {
list-style: none;
padding-top: 50px;
padding-left: 50px;
display: block;
}
#options ul li {
padding-bottom: 2px;
text-align: center;
border-bottom: 1px solid black;
width: 150px;
height: 30px;
text-align-last: right;
line-height: 2;
text-shadow: 0px 1px 1px black;
}
#options ul li:before {
position: absolute;
content: "";
left: 50px;
padding-bottom: 2px;
text-align: center;
border-bottom: 1px solid rgba(134, 94, 14, 0.5);
width: 150px;
height: 31px;
}
#options ul li:hover {
cursor: pointer;
padding-bottom: 5px;
font-size: 22px;
}
#options ul li:hover:before {
position: absolute;
content: "";
left: 50px;
padding-bottom: 2px;
text-align: center;
border-bottom: 1px solid green;
width: 150px;
height: 31px;
}
</style>
<div id="demoBoard">
<h2>Demo</h2>
<div id="Gboard"></div>
<div id="options" class="menu">
<p id="close">x</p>
<ul>
<li>Demo</li>
<li>Demo</li>
<li>Demo</li>
<li>Demo</li>
<li>Demo</li>
<li>Test</li>
</ul>
</div>
</div>
:hover
is not working on all the elements that is applying hover. I don't know what's going on with this code. It's working on some other test I've done.
That's because the content created by :after and :before on #demoBoard and #content is placed on top on your links, so you can't hover over them.
Add this to change the z-index of your links, essentially putting them on top of the other pseudo content.
#options ul li {
position: relative;
z-index: 2;
}
Note: if you do this, also change the left value of #options ul li:before and #options ul li:hover:before to "0", since it will now position itself relative to the list-item.
I gave the <ul>
the following styles:
position: relative;
z-index: 1;
And it is working fine. A lot of the elements are positioned absolutely but the order of them is not defined.
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.