刷新時更改背景顏色和懸停顏色

每次用戶刷新頁面時，我都想更改網站徽標顏色和按鈕的懸停顏色。顏色必須協調一致。 Website Link 該徽標實際上是一個透明區域的圖像，我可以放置任何背景顏色。刷新時更改背景顏色和懸停顏色

有人有類似的問題在這裏：JQuery Random Background color and color, on 2 div's

這是我做了基於線程的JavaScript：

$(document).ready(function(){ 
    var colors = ["#fda65f","#66CCFF","#71e271","#D37AFF"];     
    var rand = Math.floor(Math.random()*colors.length);   
    $('#logo').css("background-color", colors[rand]); 
    $('.cbp-ig-grid').css("background-color", colors[rand]); 
});

.cbp-IG網適當變化的背景顏色，但我想該顏色僅在懸停時出現。所述.cbp-IG-網格類有此懸停屬性：

.cbp-IG-網格LI>：懸停{ 背景色：＃71e271;}

的問題是如果我用'.cbp-ig-grid li> a：hover'將JavaScript代碼'.cbp-ig-grid'更改爲停止工作。我沒有Javascript的經驗，所以我肯定做錯了什麼。

來源

2014-03-31 Andrei M

我會更傾向於打印反正，你不能用jQuery選擇控制懸停狀態出一個<style>表使用JavaScript比添加hover()事件使用jquery

<script> 
var colors = ["#fda65f","#66CCFF","#71e271","#D37AFF"];     
var rand = Math.floor(Math.random()*colors.length); 
var head = document.head, 
    style = document.createElement('style'); 

var css = '#logo { background-color: ' + colors[rand] + '; } '; 
    css += '.cbp-ig-grid li > a:hover { background-color: ' + colors[rand] + '; } '; 

style.type = 'text/css'; 
if (style.styleSheet){ 
    style.styleSheet.cssText = css; 
} else { 
    style.appendChild(document.createTextNode(css)); 
} 

head.appendChild(style); 
</script>

來源

2014-03-31 15:48:16 haxxxton

你剛剛救了我！：D它完美的作品！ –

嘗試使用hover()方法：

$('.cbp-ig-grid').hover(function() { 
    $(this).css("background-color", colors[rand]); 
});

來源

2014-03-31 15:43:06 csanonymus

謝謝！它與$（'。cbp-ig-grid li'）一起使用。hover（function（）{ $（this）.css（「background-color」，colors [rand]）; }）;但是現在在盤旋之後，顏色保持活躍。我能做些什麼，所以懸停效果只保留在鼠標上方？ }）; –

使用此

$('.cbp-ig-grid li > a').hover(function(){ 
$(this).css("background-color", colors[rand]); 
});

來源

2014-03-31 15:44:13 Rupam

你在做什麼是這樣的：

更換$('.cbp-ig-grid').css("background-color", colors[rand]);

與$('.cbp-ig-grid li > a:hover').css("background-color", colors[rand]);

是否正確？通過設置事件處理程序這樣的功能$('.cbp-ig-grid')

你可以做到這一點：

$(document).ready(function(){ 
    var colors = ["#fda65f","#66CCFF","#71e271","#D37AFF"];     
    var rand = Math.floor(Math.random()*colors.length);   
    $('#logo').css("background-color", colors[rand]); 

    $(".cbp-ig-grid li").on("mouseover", function() { 
     $(this).css("background-color", colors[rand]); 
    }); 

}

來源

2014-03-31 15:46:55 Gotschi

刷新時更改背景顏色和懸停顏色

回答

相關問題