How to create three stars plus an average star without: hover?

Question

How to create three stars plus an average star without: hover?

Navigation

#1 by (2 votes)
#2 by (2 votes)
#3 by (2 votes)

5

I have problems in the styles CSS I'm wanting to show three stars plus a 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 by removing the :hover it shows all the 5 stars of yellow color without showing me the half of a star

Note: All changes must be controlled or applied by means of the non-dependent .css styles file ie not adding styles in the html tags everything must be from the style.css file

html5 css3

asked by AmLy 19.10.2017 в 22:05

source

3 answers

2

You can spin this star and remove the hover with this property:

pointer-events:none;

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).

Put another way: if it is invisible to the pointer or not.

.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" style="pointer-events:none;" data-index="7"></li>
  <li class="c-rating__item left" data-index="8"></li>
  <li class="c-rating__item" data-index="9"></li>
</ul>

answered by 19.10.2017 в 22:15

2

What you can do is select the <li> that you require and apply the property pointer-events:none !important; . You can select them in many ways, for example by means of their attribute data-index , as you can notice, this attribute is unique for each one, for which there will be no problem.

NOTE: You can also select the <li> using nth-child() or simply by adding a special class to each, in short there are many ways in which you can achieve your goal

Here I leave you one of the many ways in which you can solve your problem.

.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;
}

li[data-index="7"],
li[data-index="8"],
li[data-index="9"]{
  pointer-events:none !important;
}

<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>

And this other form that is totally valid:

.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;
}

.c-rating__item:nth-child(8),
.c-rating__item:nth-child(9),
.c-rating__item:nth-child(10){
  pointer-events:none !important;
}

<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 attached an image where you can see from which version the browsers support this property css:

ANOTHER SOLUTION USING EXISTING STYLES

But as I say yes or if you should add more lines of code

.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;
}

.c-rating__item:nth-child(8),
.c-rating__item:nth-child(10){
  background-position: -12px 0px !important;
}

.c-rating__item:nth-child(9){
    background-position: 0px 0px !important;
}

<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>

EXPLANATION: This other way what it does is force the last <li> to keep the initial position of its background-image ignoring the :hover

For your solution taking into account the dynamism of the stars you should simply remove the lines of the :hover and that's it.

.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{
    background-position: -36px 0;
}
.c-rating__item.left.is-active{
    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>

answered by 19.10.2017 в 23:08

C # MVC How to use currency format Define type of variable in a function

score 2 · Accepted Answer

One solution is to use :before

Change this:

.c-rating__item.is-active,
.c-rating__item:before {
    background-position: -36px 0;
}
.c-rating__item.left.is-active,
.c-rating__item.left:before {
    background-position: -24px 0;
}

Because of this:

.c-rating__item.is-active,
.c-rating__item:before {
    background-position: -36px 0;
}
.c-rating__item.left.is-active,
.c-rating__item.left:before {
    background-position: -24px 0;
}