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