我的代码

star.jsp

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8" />
    <link href="css/style.css" rel="stylesheet" type="text/css">

    <title>Notation</title>
    <script type="text/javascript">
        function notation(starId) {

            var elements = document.getElementsByClassName("notation-star-
               selected");

            for (i = 0; i < elements.length; i++) {
                elements[i].className = "notation-star";
            }


            document.getElementById(starId).className = "notation-star-
            selected";


            document.getElementById("notationNote").value = starId.substr(4, 
                  4);

            var note = document.getElementById("notationNote").value = 
            starId.substr(4, 4);

            document.getElementById("vote").innerHTML = note.valueOf();



           }
        </script>



       </head>

         <div class="notation-text">Votre avis nous est très précieux pour 
         améliorer la qualité de notre service</div>


   <form method="post" action="voting">
   <div id="star5" class="notation-star" onClick="notation(this.id);"></div>
   <div id="star4" class="notation-star" onClick="notation(this.id);"></div>
   <div id="star3" class="notation-star" onClick="notation(this.id);"></div>
   <div id="star2" class="notation-star" onClick="notation(this.id);"></div>
   <div id="star1" class="notation-star" onClick="notation(this.id);"></div>
   <input type="hidden" id="notationNote" name="notation_note" value="0">
   <input type="submit" value="ok"></form  <br>

   <p id="vote"></p>

              </html>

我的代码

style.css

body {
font-family: Verdana, arial;
 }

.notation-text {
color: #000000;
font-size: 18px;
text-align: center;
margin: 18px;
}

.notation-block-star {
display: table;
margin: 0 auto;
width: inherit;
}


.notation-star {
background-image: url("../images/etoile_grise.png");
background-repeat: no-repeat;
cursor: pointer;
display: table-cell;
float: right;
height: 64px;
width: 64px;
padding: 10 5px;
}


.notation-star:hover,
.notation-star:hover ~ .notation-star {
background-image: url("../images/etoile_jaune.png");
}

.notation-star-selected {
background-image: url("../images/etoile_jaune.png");
background-repeat: no-repeat;
cursor: pointer;
display: table-cell;
float: right;
height: 64px;
width: 64px;
padding: 0 5px;
}

.notation-star-selected  ~ .notation-star {
background-image: url("../images/etoile_jaune.png");
}

我更新了width和height并添加了font-size 但它仍然没有奏效。

Answer 1

示例工作代码希望这可以解决您的问题

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8" />
    <link href="css/style.css" rel="stylesheet" type="text/css">

    <title>Notation</title>
 

<style>
body {
font-family: Verdana, arial;
 }

.notation-text {
color: #000000;
font-size: 18px;
text-align: center;
margin: 18px;
}

.notation-block-star {
display: table;
margin: 0 auto;
width: inherit;
}


.notation-star {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Empty_Star.svg/2000px-Empty_Star.svg.png");
background-repeat: no-repeat;
cursor: pointer;
display: table-cell;
float: right;
height: 20px;
width: 20px;
padding: 10 5px;
background-size: cover;
}


.notation-star:hover,
.notation-star:hover ~ .notation-star {
background-image: url("http://findicons.com/files/icons/1035/human_o2/128/bookmark_new.png");
}

.notation-star-selected {
background-image: url("../images/etoile_jaune.png");
background-repeat: no-repeat;
cursor: pointer;
display: table-cell;
float: right;
height: 64px;
width: 64px;
padding: 0 5px;
}

.notation-star-selected  ~ .notation-star {
background-image: url("../images/etoile_jaune.png");
}
</style>

       </head>

         <div class="notation-text">Votre avis nous est très précieux pour 
         améliorer la qualité de notre service</div>


   <form method="post" action="voting">
   <div id="star5" class="notation-star" onClick="notation(this.id);"></div>
   <div id="star4" class="notation-star" onClick="notation(this.id);"></div>
   <div id="star3" class="notation-star" onClick="notation(this.id);"></div>
   <div id="star2" class="notation-star" onClick="notation(this.id);"></div>
   <div id="star1" class="notation-star" onClick="notation(this.id);"></div>
   <input type="hidden" id="notationNote" name="notation_note" value="0">
   <input type="submit" value="ok"></form  <br>

   <p id="vote"></p>

              </html>

jsp页面的小星级评分

我的代码

我的代码

1 个答案: