gpt4 book ai didi

JavaScript 阻塞 CSS

转载 作者:太空宇宙 更新时间:2023-11-04 05:01:29 30 4
gpt4 key购买 nike

我有一组按钮,当鼠标悬停在这些按钮上时,它们会改变颜色。这些的 CSS 以这种方式运行:

#navsite ul li button
{
height: 60px;
width: 60px;
background-image: -moz-linear-gradient(bottom, black, #4D4D4D);
box-shadow: 2px 3px 3px 2px #888888;
border-radius: 15px;
border-color: 359ABC;
cursor: pointer;
margin-left: 5px;
margin-right: 5px;
vertical-align: bottom;
}

#navsite ul li button:hover
{
height: 60px;
width: 60px;
background-image: none;
background-color: #00054C;
box-shadow: 2px 3px 3px 2px #888888;
border-radius: 15px;
border-color: 359ABC;
cursor: pointer;
margin-left: 5px;
margin-right: 5px;
vertical-align: bottom;
}

然后,JavaScript 在点击时改变颜色(下面的例子涵盖了五个按钮中的一个,每个按钮都有一个函数,请原谅大篇幅):

function dude()
{
document.getElementById("dude").hidden=false;
document.getElementById("bob").hidden=true;
document.getElementById("ted").hidden=true;
document.getElementById("joe").hidden=true;
document.getElementById("fred").hidden=true;
document.getElementById("button1").style.background='#00054C';
document.getElementById("button2").style.background='-moz-linear-gradient(bottom, black, #4D4D4D)';
document.getElementById("button3").style.background='-moz-linear-gradient(bottom, black, #4D4D4D)';
document.getElementById("button4").style.background='-moz-linear-gradient(bottom, black, #4D4D4D)';
document.getElementById("button5").style.background='-moz-linear-gradient(bottom, black, #4D4D4D)';
}

我现在的问题是,在激活此脚本后,CSS 规则#navsite ul li button:hover 不再适用,并且根本没有鼠标悬停效果。如何修复脚本,使其不会阻止 CSS 正常运行?

编辑:我是否应该考虑将该 CSS 子句转换为脚本本身的一部分?我发现无法将脚本转换为 CSS 子句,并且我希望使用最少的资源。


我已经更改了脚本,以便它列出事件类和非事件类,而不是列出颜色本身。不过,它仍然相当笨重;关于如何浓缩它有什么想法吗?

最佳答案

不要使用 javascript 将样式直接添加到元素,而是创建一个类 .active 并将其附加到单击的元素。然后在不再事件时删除类。

.active{-moz-linear-gradient(bottom, black, #4D4D4D)}

关于JavaScript 阻塞 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11419261/

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