[英]change background color and hover colors on refresh
I want to change the website logo color and the hover color of the buttons every time a user refreshes the pages. 我想在每次用户刷新页面时更改网站徽标颜色和按钮的悬停颜色。 The colors have to be coordinated. 颜色必须协调。 Website Link The logo is actually an image with a transparent region, where I can put any background color I want. 网站链接徽标实际上是一个带有透明区域的图像,我可以在其中放置任何我想要的背景颜色。
Someone had a similar problem here: JQuery Random Background color and color, on 2 div's 有人在这里有类似的问题: JQuery Random Background颜色和颜色,在2 div上
This is the javascript that I made based on that thread: 这是我基于该线程制作的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 changes the background color properly, but I want the color to appear only on hover. .cbp-ig-grid正确更改背景颜色,但我希望颜色仅在悬停时出现。 The .cbp-ig-grid class has this hover property: .cbp-ig-grid类具有此悬停属性:
.cbp-ig-grid li > a:hover { background-color:#71e271;} .cbp-ig-grid li> a:悬停{background-color:#71e271;}
The problem is that if I change the javascript code '.cbp-ig-grid' with '.cbp-ig-grid li > a:hover' it stops working. 问题是如果我用'.cbp-ig-grid li>更改javascript代码'.cbp-ig-grid'a:hover'它会停止工作。 I have no experience with Javascript, so I'm definitely doing something wrong. 我没有使用Javascript的经验,所以我肯定做错了什么。
Try using hover()
method : 尝试使用hover()
方法:
$('.cbp-ig-grid').hover(function() {
$(this).css("background-color", colors[rand]);
});
i would be more inclined to print out a <style>
sheet using javascript than add hover()
events using jquery 我更倾向于使用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>
Use this 用这个
$('.cbp-ig-grid li > a').hover(function(){
$(this).css("background-color", colors[rand]);
});
What you're doing is this: 你在做什么是这样的:
replace $('.cbp-ig-grid').css("background-color", colors[rand]);
替换$('.cbp-ig-grid').css("background-color", colors[rand]);
with $('.cbp-ig-grid li > a:hover').css("background-color", colors[rand]);
with $('.cbp-ig-grid li > a:hover').css("background-color", colors[rand]);
is that correct? 那是对的吗? anyways, you can't control the hover state with a jQuery selector: $('.cbp-ig-grid')
无论如何,你无法使用jQuery选择器控制悬停状态: $('.cbp-ig-grid')
you can achieve this by setting a event handler with a function like this: 您可以通过使用如下函数设置事件处理程序来实现此目的:
$(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]);
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.