更改颜色JavaScript不起作用

Question

我的问题是：列表上有三个元素，并且当鼠标悬停时，我必须不断更改文本颜色。

所以我要建立3种不同的功能，因为颜色是不同的。

我所做的是：

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

问题是：它只改变一次颜色。

我也尝试使用十六进制颜色，只是不起作用。

请耐心等待，我仍然是新手。

Answer 1

问题是一个小的逻辑缺陷。 颜色确实会改变，但会立即改变。

如果第一个if语句的值为true且颜色设置为rgb(235, 153, 153)则第二个if语句也恰好为true，并在更改后立即进行检查。 然后，颜色变回另一个rgb值。

使用else if代替两个单独的语句可以解决此问题。 或者，您可以在第一个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

您可以使用CSS。

将代码放在<head>标记内。

<style type="text/css">

.menuitems {
  color: rgb(204, 0, 0);
}

.menuitems:hover {
  color: rgb(235, 153, 153);
}

</style>

效果很好。

您还可以通过使用不同的类将不同的颜色用于不同的项目。

为menuitems定义一个基类，这将是它们的基色。 然后为您要使用的每种颜色添加一个不同的类。

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

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

我使用的类的名称和颜色仅供参考。 随意使用您认为更适合您的设计的设计。

更改颜色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