I am building a star-rating element using CSS.
I made a set of clickable radio buttons as pink elements. When I click these elements, all elements after them become grey, and all elements before them turn pink.
I want to set a hover on them so I set all the pinks to become grey as I hover.
The problem is that when I hover through the greys , they are already grey so nothing changes.
The solution I am trying is to set five pseudo elements on top of my radio buttons so I can set them to be pink as I hover. These pseudo elements should never be clickable so should never change from gray to pink.
The problem is that I cannot click through the pseudo elements, as they are above.
If I give all the divs for the pseudo elements pointer-events:none, there will be no hover.
If I set a div to wrap these pseudo element's divs, they will hover but clicking is still not possible.
Is there a way to achieve this? A better approach maybe?
here is the code:
* {
padding: 0;
margin: 0;
}
.div {
display: flex;
flex-direction: row;
background: orchid;
width: 500px;
height: 200px;
}
.holder-wrapper {
top: 0;
left: 0;
position: absolute;
font-size: 100px;
color: lightpink;
display: flex;
flex-direction: row;
width: 500px;
height: 200px;
}
input {
appearance: none;
font-size: 100px;
color: lightpink;
}
input::before {
position: relative;
content: '\2602';
}
.holder::before {
content: '\2601';
}
input:checked ~ ::before {
color: #333;
}
.holder:hover ~ ::before {
color: #333;
}
<div class="div">
<input type="radio" data-rate="1" name="rating" class="rating--star" checked/>
<input type="radio" data-rate="2" name="rating" class="rating--star" />
<input type="radio" data-rate="3" name="rating" class="rating--star" />
<input type="radio" data-rate="4" name="rating" class="rating--star" />
<input type="radio" data-rate="5" name="rating" class="rating--star" />
<div class="holder-wrapper">
<div class="holder"></div>
<div class="holder"></div>
<div class="holder"></div>
<div class="holder"></div>
<div class="holder"></div>
</div>
</div>
Sharkfin :
\r\n\r\n* {\n padding: 0;\n margin: 0;\n}\n\n.div {\n display: flex;\n flex-direction: row;\n background: orchid;\n width: 500px;\n height: 200px;\n opacity: 1;\n \n\n}\n\ninput {\n appearance: none;\n font-size: 100px;\n color: black;\n}\ninput::before {\n position: relative;\n content: \"\\2602\";\n color: black;\n opacity:1;\n transition: opacity 0.3s ease-in-out;\n}\ninput:focus{\noutline:none;\n}\ninput:checked ~ ::before {\n opacity:0.3\n\n}\n\ninput:hover ~ ::before {\n opacity:0.2\n}\r\n<input type=\"radio\" data-rate=\"1\" name=\"rating\" class=\"rating--star\" checked />\n<input type=\"radio\" data-rate=\"2\" name=\"rating\" class=\"rating--star\" />\n<input type=\"radio\" data-rate=\"3\" name=\"rating\" class=\"rating--star\" />\n<input type=\"radio\" data-rate=\"4\" name=\"rating\" class=\"rating--star\" />\n<input type=\"radio\" data-rate=\"5\" name=\"rating\" class=\"rating--star\" />\n\n</div>",
2020-08-09T21:03:54
More about “not clickable but hoverable pseudo elements” related questions