gpt4 book ai didi

javascript - 刷新时更改背景颜色和悬停颜色

转载 作者:太空宇宙 更新时间:2023-11-04 03:56:16 25 4
gpt4 key购买 nike

我想在每次用户刷新页面时更改网站 Logo 颜色和按钮的悬停颜色。颜色必须协调。 Website Link Logo 实际上是一个带有透明区域的图像,我可以在其中放置我想要的任何背景颜色。

有人在这里遇到了类似的问题: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 { background-color:#71e271;}

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

最佳答案

我会更倾向于打印出 <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>

关于javascript - 刷新时更改背景颜色和悬停颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22765863/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com