I have problems in the styles CSS
I want to show three stars plus one half of a star without:hover
Example:
.c-rating {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.c-rating__item {
-webkit-box-flex: 0;
-webkit-flex: 0 0 12px;
-ms-flex: 0 0 12px;
flex: 0 0 12px;
height: 24px;
background-position: -12px 0px;
background-image: url(http://svgshare.com/i/3KS.svg);
cursor: pointer;
}
.c-rating__item.left {
background-position: 0px 0px;
}
.c-rating__item.is-active,
.c-rating__item:hover {
background-position: -36px 0;
}
.c-rating__item.left.is-active,
.c-rating__item.left:hover {
background-position: -24px 0;
}
<ul class="c-rating">
<li class="c-rating__item is-active left" data-index="0"></li>
<li class="c-rating__item is-active" data-index="1"></li>
<li class="c-rating__item is-active left" data-index="2"></li>
<li class="c-rating__item is-active" data-index="3"></li>
<li class="c-rating__item is-active left" data-index="4"></li>
<li class="c-rating__item is-active" data-index="5"></li>
<li class="c-rating__item is-active left" data-index="6"></li>
<li class="c-rating__item" data-index="7"></li>
<li class="c-rating__item left" data-index="8"></li>
<li class="c-rating__item" data-index="9"></li>
</ul>
I have tried to remove the
:hover
but when removing the:hover
it shows all the 5 yellow stars without showing me half a star
Note: All changes must be controlled or applied through the non-dependent .css file, that is, not adding styles in the html tags, everything must be from the style.css file
You can style that star and unhover it with this property:
The pointer-events property allows you to control whether or not an element can receive cursor events regardless of the stacking order (its z-index value).
In other words: if it is invisible to the pointer or not.
What you can do is select the
<li>
ones you require and apply the property to thempointer-events:none !important;
. You can select them in many ways, such as through their attributedata-index
, as you can see this attribute is unique for each one so there will be no problem.NOTE: you can also select them
<li>
usingnth-child()
or simply adding a special class to each one, in short there are many ways in which you can achieve your goalHere I leave you one of the many ways in which you can solve your problem.
And this other way that is totally valid:
I attach an image where you can see from which version browsers support this css property:
ANOTHER SOLUTION USING THE EXISTING STYLES
But how do I tell you if or if you should add more lines of code
EXPLANATION: What this other way does is force the latter
<li>
to maintain the initial position of theirbackground-image
ignoring the:hover
For your solution taking into account the dynamism of the stars you should simply remove the lines from the
:hover
and that's itOne solution is to use
:before
Change this:
For this: