Changing color JavaScript doesn't work
Question
My problem is: I have three elements on a list, and I have to keep changing the text color when the mouse is hover.
So I am building 3 different functions, because the colors are different.
What I did is:
<script type="text/javascript">
var links = document.getElementsByClassName("menuitems");
function firsthover()
{
links[0].style.color = "rgb(204, 0, 0)"; /*this is for avoiding setInterval delay*/
setInterval(function(){
if(links[0].style.color == "rgb(204, 0, 0)")
{
links[0].style.color = "rgb(235, 153, 153)";
}
if(links[0].style.color == "rgb(235, 153, 153)")
{
links[0].style.color = "rgb(204, 0, 0)";
}
},1150);
}
</script>
The problem is: it changes the color just once.
I tried to use hexadecimal color too, just doesn't work.
Please be patient, I am still a novice.
2 answers
solution1
1 ACCPTED 2015-07-08 13:37:44
The problem is a small logical flaw. The color does change, but it changes back right away.
If the first if statement evaluates as true and the color is set to rgb(235, 153, 153) the second if statement happens to be true as well, and gets checked right after the change. The color then changes back to the other rgb value.
Using else if instead of two separate statements fixes this. Alternatively you could place a return in the first if statement to prevent the second from being executed after the successful change.
if(links[0].style.color == "rgb(204, 0, 0)")
{
links[0].style.color = "rgb(235, 153, 153)";
}
else if(links[0].style.color == "rgb(235, 153, 153)")
{
links[0].style.color = "rgb(204, 0, 0)";
}
solution2
0 2015-07-08 13:27:15
You can use CSS.
Put the code below inside your <head> tag.
<style type="text/css">
.menuitems {
color: rgb(204, 0, 0);
}
.menuitems:hover {
color: rgb(235, 153, 153);
}
</style>
It works perfectly well.
You can also use different colors for different items by using different classes.
Define a base class for menuitems , that will be the base color of them. Then add a different class for each color you would like to use.
Your CSS:
<style type="text/css">
.menuitems { /* base color */
color: rgb(204, 0, 0);
}
.menuitems:hover { /* base hover color */
color: rgb(235, 153, 153);
}
.menuitem-red:hover {
color: rgb(255, 0, 0) !important;
}
.menuitem-green:hover {
color: rgb(0, 255, 0) !important;
}
.menuitem-blue:hover {
color: rgb(0, 0, 255) !important;
}
</style>
Your HTML:
<ul id="menu">
<li class="menuitem">Menu item base</li>
<li class="menuitem menuitem-red">Menu item red</li>
<li class="menuitem menuitem-green">Menu item green</li>
<li class="menuitem menuitem-blue">Menu item blue</li>
</ul>
The name of classes I used and the colors are for sample purposes. Feel free to use the ones you think that fits better for your design.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.