Javascript替换

Question

Okay first of all i am really sorry about my last post but i really need help here i will put a clearer code about what i really want. I am not good at javascript so hope you please help me.

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

okay here is html. IPB makes everything but i want to make a small edit with javascript. and no problem if it will change the html of css both are same so here is what i am thinking of:

When i hover on star 2, star 1 and star 2 will have same new class or the will change to something new when i hove on star 4, star 4 and all stars before star 4 will have new same class or the will change to same new thing

and when i click on star 4 or whatever star 2 a new class will be added to this class.

can this be done through javascript?

Answer 1

Of course you can do it in JS, but also CSS only.

Assuming you want to change background,

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

Demo