我如何通過jquery更改backgroundcolor？

我有一個網站，我想改變bg-coler而懸停在菜單（如RHCP-網站），我已經嘗試過使用jQuery，但它沒有工作..

（只是要清楚，我不想改變它包含我的菜單DIV容器的背景顏色應該是全身..-->代碼）

謝謝！

代碼：

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<link rel="stylesheet" type="text/css" href="style.css"> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
</script> 

<script type="text/javascript"> 
    $('.start').hover(function() { 
     $('html').css('background-color', '#676767') 
    }); 
</script> 

<?php include_once 'template.php' ?> 

<title>Maximilian Braun</title> 
</head> 

<body> 
    <div class="start"> 
     <h1> 
      <a href="actor.php" >Schauspieler</a> - <a href="foto.php">Fotograf</a> 
     </h1> 
    </div> 
    <?php echo footer();?> 
</body>

來源

2014-07-10 Maximilian Braun

嘗試來包裝你的代碼document's ready處理程序中，

$(function(){ 
$('.start').hover(function(){$('html').css('background-color','#676767') }); 
});

因爲jQuery的不能start類識別元件，而相關的元素沒有得到加載。

來源

2014-07-10 10:38:35

非常感謝你！（：這麼簡單：d 是否有可能與圖像作爲BG做到這一點我已經嘗試過使用''的背景color' background'instead –

你的代碼應該是裏面的DOM準備

$(function() { 
     $('.start').hover(function(){$('html').css('background-color','#676767') }); 
});

來源

2014-07-10 10:39:06

你應該把這個當DOM準備好了，所以把它放在裏面$(function()..也把;在$('html').css('background-color','#676767')結束。

$(function(){ 
    $('.start').hover(function(){$('html').css('background-color','#676767'); }); 
});

Demo

來源

2014-07-10 10:40:39

使用。就緒（處理器）可以解決您發出：以下語法三個都是等價的：

- $(document).ready(handler) 
- $().ready(handler) (this is not recommended) 
- $(handler)

$（文件）。就緒（功能（$）{

$('.start').hover(function(){$('html').css('background-color','#676767') });

}）;

來源

2014-07-10 10:49:38

快速答案+解釋

，因爲你使用jQuery文檔裝載結束前，總是包裹你的代碼，您的代碼不工作要麼：

$(document).ready(function(){ 
    //your code goes here 
}

或：

$(function(){ 
    //your code goes here 
}

只需使用Rajaprabhu建議：

$(function(){ 
$('.start').hover(function(){ 
    $('html').css('background-color','#676767') }); 
});

獲取彩色動畫

的RHCP website但不僅改變顏色，也動畫這種變化。 jQuery不能動畫顏色。你可以用兩種方法來解決這個問題。一個是使用jQuery插件，另一個是使用CSS轉換。

插件

如果導入插件像jQuery Color你可以使用：

$(function(){ 
$('.start').hover(function(){ 
    $('html').animate({backgroundColor: '#676767') }); 
});

CSS過渡

而是有一個插件把動畫的照顧，你可以的還可以使用CSS動畫，這將處理不斷變化的顏色值之間的轉換。

使用原始代碼：

$(function(){ 
$('.start').hover(function(){ 
    $('html').css('background-color','#676767') }); 
});

，並使用以下CSS

.start { 
    -webkit-transition: background-color 0.3s ease-out; /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */ 
      transition: background-color 0.3s ease-out; /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */ 
}

PS：如果你使用CSS轉換，的確注意到IE 9及以下不支持CSS過渡。

來源

2014-07-10 11:04:51

嘿嘿，謝謝 :) 這個動畫的事情？！ .. 我做了以下： ' ' 但它不工作;/ –

@MaximilianBraun：相信你應該使用'''backgroundColor'''而不是'''background-Color''' –

也不工作。 –

我如何通過jquery更改backgroundcolor？

回答

相關問題