更改颜色JavaScript不起作用

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. 所以我要建立3种不同的功能，因为颜色是不同的。

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. 请耐心等待，我仍然是新手。

Answer 1

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. 如果第一个if语句的值为true且颜色设置为rgb(235, 153, 153)则第二个if语句也恰好为true，并在更改后立即进行检查。 The color then changes back to the other rgb value. 然后，颜色变回另一个rgb值。

Using else if instead of two separate statements fixes this. 使用else if代替两个单独的语句可以解决此问题。 Alternatively you could place a return in the first if statement to prevent the second from being executed after the successful change. 或者，您可以在第一个if语句中放置一个return ，以防止在成功更改后执行第二个语句。

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)";
}

Answer 2

You can use CSS. 您可以使用CSS。

Put the code below inside your <head> tag. 将代码放在<head>标记内。

<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. 为menuitems定义一个基类，这将是它们的基色。 Then add a different class for each color you would like to use. 然后为您要使用的每种颜色添加一个不同的类。

Your CSS: 您的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: 您的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. 随意使用您认为更适合您的设计的设计。

更改颜色JavaScript不起作用

问题描述

2 个解决方案

解决方案1
1 已采纳 2015-07-08 13:37:44

解决方案2
0 2015-07-08 13:27:15

更改颜色JavaScript不起作用

问题描述

2 个解决方案

解决方案1 1 已采纳 2015-07-08 13:37:44

解决方案2 0 2015-07-08 13:27:15

解决方案1
1 已采纳 2015-07-08 13:37:44

解决方案2
0 2015-07-08 13:27:15