刷新时更改背景颜色和悬停颜色答案

【问题标题】：change background color and hover colors on refresh刷新时更改背景颜色和悬停颜色
【发布时间】：2014-03-31 15:34:56
【问题描述】：

我想在每次用户刷新页面时更改网站徽标颜色和按钮的悬停颜色。颜色必须协调。 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-grid 正确更改背景颜色，但我希望颜色仅在悬停时出现。 .cbp-ig-grid 类有这个悬停属性：

.cbp-ig-grid li > a:hover { 背景颜色：#71e271;}

问题是，如果我用 '.cbp-ig-grid li > a:hover' 更改 javascript 代码 '.cbp-ig-grid'，它就会停止工作。我没有使用 Javascript 的经验，所以我肯定做错了什么。

【问题讨论】：

标签： javascript jquery css random

【解决方案1】：

我更倾向于使用 javascript 打印出 <style> 工作表，而不是使用 jquery 添加 hover() 事件

<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>

【讨论】：

【解决方案2】：

尝试使用hover() 方法：

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

【讨论】：

谢谢！它适用于 $('.cbp-ig-grid li').hover(function() { $(this).css("background-color", colors[rand]); });但现在悬停后，颜色仍然处于活动状态。我该怎么做才能使悬停效果仅在鼠标悬停时保持不变？ });

【解决方案3】：

使用这个

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

【讨论】：

【解决方案4】：

你正在做的是：

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

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

是这样吗？无论如何，您无法使用 jQuery 选择器控制悬停状态：$('.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]);
   });

}

【讨论】：