更改背景顏色addClass jQuery中

我學習jQuery的，我已經寫了旨在當鼠標進入（或葉）一個div添加（或刪除）一類的簡單腳本。新課程增加了不同的高度，也應該改變輸入的div的背景顏色和不透明度。更改背景顏色addClass jQuery中

下面的代碼：

<!DOCTYPE html> 

<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>Testing jQuery</title> 
    <style type="text/css"> 
     div { 
      width: 400px; 
      height: 300px; 
      margin: 20px; 
      float: left; 
     } 


     #one { 
      background-color: red; 
     } 

     #two { 
      background-color: green; 
     } 

     #three { 
      background-color: blue; 
     } 

     .change { 
      height: 150px; 
      background-color: rgba(0,0,0,0.4); 
     } 

    </style> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
</head> 
<body> 
    <div id="one"></div> 
    <div id="two"></div> 
    <div id="three"></div> 

    <script type="text/javascript"> 

     $(document).ready(function() { 
      $("div").mouseenter(function() { 
       $(this).addClass("change"); 
      }); 

      $("div").mouseleave(function() { 
       $(this).removeClass("change"); 
      }); 
     }); 

    </script> 

</body> 
</html>

而高度的變化，有一個在background-color性能沒有影響。爲什麼？

我已經檢出了.mouseenter(),.mouseleave()和.addClass() API文檔，但找不到特定於此問題的任何內容。

來源

2015-09-01 Manish Giri

你意識到你可以在CSS中單獨做到這一點，對嗎？ –

你的JavaScript代碼是100％的罰款。問題出在你寫的CSS。選擇通過ID #one比類名.one更重要，所以當你在同一時間塗抹一些#rules和.rules到emenet，瀏覽器將首先選擇了那些更爲重要。如果可以，請儘量不要在css中使用#id選擇器，並將其留在javaScript中使用。

CSS：

.one { 
    background-color: red; 
} 

.two { 
    background-color: green; 
} 

.three { 
    background-color: blue; 
}

HTML：

<div class="one"></div> 
<div class="two"></div> 
<div class="three"></div>

演示：https://jsfiddle.net/cz8v1gy4/

來源

2015-09-01 21:05:37

重讀後編輯答案：

您正在運行CSS特性問題。 ID比類更具體，這意味着你的背景顏色將保持ID的顏色，而不是類。這是（經常）建議不要在CSS中使用ID的原因之一。

如果你改變一切交給班會工作，你是如何期待：

<!DOCTYPE html> 

<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>Testing jQuery</title> 
    <style type="text/css"> 
     div { 
      width: 400px; 
      height: 300px; 
      margin: 20px; 
      float: left; 
     } 


     .one { 
      background-color: red; 
     } 

     .two { 
      background-color: green; 
     } 

     .three { 
      background-color: blue; 
     } 

     .change { 
      height: 150px; 
      background-color: rgba(0,0,0,0.4); 
     } 

    </style> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
</head> 
<body> 
    <div class="one"></div> 
    <div class="two"></div> 
    <div class="three"></div> 

    <script type="text/javascript"> 

     $(document).ready(function() { 
      $("div").mouseenter(function() { 
       $(this).addClass("change"); 
      }); 

      $("div").mouseleave(function() { 
       $(this).removeClass("change"); 
      }); 
     }); 

    </script> 

</body> 
</html>

來源

2015-09-01 20:50:29

當你將鼠標懸停在div#one變得div#one.changed。現在，對於背景色有兩種競爭的價值：

#one { 
    background-color: red; 
}

和：

.change { 
    background-color: rgba(0,0,0,0.4); 
}

第一個勝利，因爲它是more specific。

爲了解決這個問題使用利用css選擇#one:hover, #two:hover, #three:hover，:hover僞類，transition

.change { 
    height: 150px; 
    background-color: rgba(0,0,0,0.4)!important; 
}

來源

2015-09-01 20:55:03

請不要使用！重要的是要避開糟糕的設置。修改設置。 –

@DoyleLewis在這種情況下，我同意沒有理由使用id而不是類，但是在真實代碼中可能有一個原因需要這樣做。 –

嘗試。另請參見Specificity

<!DOCTYPE html> 
 

 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title>Testing jQuery</title> 
 
    <style type="text/css"> 
 
     div { 
 
      width: 400px; 
 
      height: 300px; 
 
      margin: 20px; 
 
      float: left; 
 
     } 
 

 

 
     #one { 
 
      background-color: red; 
 
     } 
 

 
     #two { 
 
      background-color: green; 
 
     } 
 

 
     #three { 
 
      background-color: blue; 
 
     } 
 

 
     #one:hover, #two:hover, #three:hover { 
 
      height: 150px; 
 
      background-color:rgba(0,0,0,0.4); 
 
      transition: height 1000ms, background-color 1000ms; 
 
     } 
 

 
    </style> 
 
</head> 
 
<body> 
 
    <div id="one"></div> 
 
    <div id="two"></div> 
 
    <div id="three"></div> 
 
</body> 
 
</html>

來源

2015-09-01 20:55:17 guest271314

這裏有一些很好的答案和解釋，爲什麼它不工作，但它看起來像沒有人回答怎麼做你的意圖是什麼。

這是將兩種背景顏色添加在一起以在懸停時獲得較暗的顏色。你可以避開它通過添加一些在別人將其變爲一個灰色

例如：

.change { 
    height: 150px; 
    background-image: linear-gradient(to right, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0.4) 100%)!important; 
}

這給了堅實的顏色漸變作爲背景圖片的圖層上的背景色上面。

Like This JSFiddle

來源

2015-09-01 21:20:40 Maus

更改背景顏色addClass jQuery中

回答

相關問題