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语句也会为真，并在更改后立即进行检查。然后颜色变回另一个rgb值。

使用else if而不是两个单独的语句修复此问题。或者，您可以在第一个if语句中放置return，以防止在成功更改后执行第二个。{/ p>

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 个答案: