Javascript 如何有两个不同的颜色变化事件

我正在尝试对mouseover、mouseout和onclick上的元素进行bgcolor更改。问题是Javascript用mouseout覆盖了我的onclick，所以我不能两者都有。那么，有没有办法在鼠标移出后重置鼠标器

函数init（）{
document.getElementById（'default'）.onmouseover=function（）{
tabHoverOn（'default'，'grey'）
};
document.getElementById（'default'）.onmouseout=function（）{
tabHoverOff（'默认值'，'黄色'）
};
document.getElementById（'section2'）。onmouseover=function（）{
tabHoverOn（'section2'，'grey'）
};
document.getElementById（'section2'）。onmouseout=function（）{
tabHoverOff（'section2'，'yellow'）
};
document.getElementById（'section3'）。onmouseover=function（）{
tabHoverOn（'section3'，'grey'）
};
document.getElementById（'section3'）。onmouseout=function（）{
tabHoverOff（'section3'，'yellow'）
};
}
函数tabHoverOn（id，bgcolor）{
document.getElementById（id）.style.backgroundColor=bgcolor；
}
功能选项卡hoveroff（id、bgcolor）{
document.getElementById（id）.style.backgroundColor=bgcolor；
}
var current=document.getElementById（'default'）；
功能选项卡1突出显示（id）{
如果（当前！=null）{
current.className=“”；
}
id.className=“tab1highlight”；
电流=id；
}
功能选项卡2高亮显示（id）{
如果（当前！=null）{
current.className=“”；
}
id.className=“tab2highlight”；
电流=id；
}
功能选项卡3高亮度（id）{
如果（当前！=null）{
current.className=“”；
}
id.className=“tab3highlight”；
电流=id；
}
window.onload=init（）
正文{
宽度：900px；
利润率：10px自动；
}
导航{
显示：块；
宽度：80%；
保证金：0自动；
}
导航>ul{
列表样式：无；
}
导航>ul>li{
显示：内联块；
利润率：0.3倍；
宽度：150px；
}
导航>ul>li>a{
宽度：100%；
背景色：#ffff66；
边框：1px实心#9b9b；
边界半径：12px 8px 0；
填充：8px 15px；
文字装饰：无；
字体大小：粗体；
字体系列：arial，无衬线；
}
主要{
显示：块；
宽度：80%；
保证金：0自动；
边框：1px实心#9b9b；
填充：10px；
}
main>h1{
字号：1.5em；
}
.tab1突出显示{
背景色：#339966；
颜色：白色；
}
.tab2highlight{
背景色：#ff6666；
颜色：白色；
}
.Tab3高亮度{
背景色：#6600ff；
颜色：白色；
}
主img{
边框：5px实心#eeefff；
宽度：80%；
边缘顶部：20px；
}






练习：导航选项卡#5


将导航选项卡练习#1、#3和#4合并到一个文件中，包括


当光标悬停在选项卡上时，临时更改选项卡的背景色
设置正在单击的选项卡的前景色和背景色
根据所选选项卡更改主元素的背景色


要进行测试，请单击选项卡，然后移动鼠标。例如，单击第三个选项卡，选项卡背景颜色切换为蓝色。然后将鼠标悬停在第三个选项卡上，该选项卡的背景色应切换为浅绿色，然后在鼠标移出后返回蓝色。



尝试更新布尔变量

var Ele = document.getElementById('default');
var clicked = false;

Ele.onclick = function(){
    clicked = true;
    // add additional functionality here
}
Ele.onmouseover = function(){
    clicked = false;
    // add additional functionality here
}
Ele.onmouseout = function(){
    if(!clicked){
    // add additional functionality here
    }
}

如果您可以帮助的话，通常最好将CSS完全排除在JavaScript之外。解决悬停问题的更好策略是使用CSS伪选择器，而不是在JavaScript中编码颜色变化。如果您将所有选项卡设置为同一类，则只需编写一次CSS：

.tab {
  background-color: yellow;
}

.tab:hover {
  background-color: grey;
}

完成后，还可以通过创建事件处理程序将单击样式降级为CSS，该事件处理程序在每次单击选项卡时添加和删除一个特殊类

在CSS文件中：

.tab.clicked {
  background-color: blue;
}

然后在JavaScript中，类似于：

var tabs = document.getElementsByClassName('tab');
for (i = 0; i < tabs.length; i ++) {
  tabs[i].onclick = function (ev) {
    for (i = 0; i < tabs.length; i ++) {
      tabs[i].classList.remove('clicked');
    }
    ev.currentTarget.classList.add('clicked');
  };
}

var tabs=document.getElementsByClassName（'tab'）；
对于（i=0；i

我创建了一个示例。
问题是这是一个学校作业，我不能有任何静态悬停。我只能拥有DHTML事件。
：hover
绝对是DHTML的一部分。但是，如果作业明确表示不使用
：hover
，那么同样的逻辑也适用（添加和删除类），只需在
上提高特定性。单击
CSS规则，它将优先于
。hover
类样式规则。即使您不能使用
：hover
，也不应该混合使用样式和功能，除非您必须这样做。如果作业迫使你这么做，至少要认识到这是一种不好的做法，不应该在将来重复。谢谢你的帮助！但是你如何分配特异性水平呢？特异性是CSS中最棘手的部分，大多数人喜欢忽略它。有一篇关于它的好文章。但基本上，我说的“使特异性更高”，是指在样式表中，悬停的规则应该是
.hover{…}
，但单击的规则应该是
a.clicked{…}
，这样当两者冲突时，
.clicked
样式将覆盖
.hover
样式，因为
a.clicked
规则已写入