Блог

Хорошо, прежде всего, я действительно сожалею о своем последнем сообщении, но мне действительно нужна помощь, здесь я добавлю более четкий код о том, чего я действительно хочу. Я не силен в javascript, поэтому надеюсь, что вы, пожалуйста, поможете мне.

 <span class="rating ipsType_smaller">
                <a href="" id="topic_rate_1" title="Rate topic 1 star">
                <i class="fa fa-star-o fa-lg rate_img"></i>
                </a>
                <a href="" id="topic_rate_2" title="Rate topic 2 stars">
                <i class="fa fa-star-o fa-lg rate_img"></i>
                </a>
                <a href="" id="topic_rate_3" title="Rate topic 3 stars">
                <i class="fa fa-star-o fa-lg rate_img"></i>
                </a>
                <a href="" id="topic_rate_4" title="Rate topic 4 stars">
                <i class="fa fa-star-o fa-lg rate_img"></i>
                </a>
                <a href="" id="topic_rate_5" title="Rate topic 5 stars">
                <i class="fa fa-star-o fa-lg rate_img"></i>
                </a>
</span>
  

итак, вот html. IPB делает все, но я хочу внести небольшую правку с помощью javascript. и никаких проблем, если это изменит html в css, оба они одинаковы, так что вот о чем я думаю:

Когда я наведу курсор на звезду 2, звезда 1 и звезда 2 будут иметь один и тот же новый класс или они изменятся на что-то новое, когда я наведу курсор на звезду 4, звезда 4 и все звезды перед звездой 4 будут иметь новый тот же класс или они изменятся на ту же новую вещь

и когда я нажимаю на звездочку 4 или любую другую звездочку 2, к этому классу будет добавлен новый класс.

можно ли это сделать с помощью javascript?

Конечно, вы можете сделать это на JS, но также и только на CSS.

Предполагая, что вы хотите изменить фон,

 .rating:hover > a {
    background: red;         /* Set it for all elements */
}
.rating > a:hover ~ a {
    background: transparent; /* Unset it for following elements */
}
  

ДЕМОНСТРАЦИЯ