Javascript 交替`<；按钮>；`将鼠标悬停在另一个`<；按钮>`

我有两个按钮。第一个是下拉菜单，悬停时显示两个同级

成形按钮

就像评论中提到的那样，您可以使用JS来实现这一点

首先，您需要在

下拉框中添加
onmouseover
和
onmouseout
触发器

然后添加一个JS，该JS将调用该类并更改其颜色和背景颜色，如代码段所示：


函数hoverTrue（）{
document.querySelector（'.dropbtn'）.style.backgroundColor=“#A774”；
document.querySelector（'.dropbtn'）.style.color=“白色”；
}
函数hoverFalse（）{
document.querySelector（'.dropbtn'）.style.backgroundColor=“#cecee99”；
document.querySelector（'.dropbtn'）.style.color=“black”；
}
.dropbtn{
宽度：210px；
背景色：#CECE99；
颜色：黑色；
字体系列：“peninim”；
字体大小：15px；
填充：3px0；
光标：指针；
}
.下拉列表{
位置：相对位置；
显示：内联块；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#A774；
颜色：白色；
最小宽度：210px；
z指数：1；
字体系列：peninim；
}
.下拉列表内容：将鼠标悬停在a上{
显示：块；
}
.下拉内容a{
颜色：白色；
填充：3x12px；
文字装饰：无；
显示：块；
字体大小：15px；
文本对齐：居中；
边框顶部：2个实心#767676；
右边框：2px实心#212121；
边框底部：2个实心#212121；
左边框：2px实心#767676；
}
.下拉列表内容a：悬停{
背景色：#CECE99；
颜色：黑色；
}
.下拉：悬停.下拉内容{
显示：块；
}
.电影资讯{
显示：内联块；
宽度：510px；
背景色：#A774；
颜色：白色；
字体系列：“peninim”；
字体大小：15px；
填充：3px0；
颜色：白色；
光标：指针；
}
.电影信息：悬停{
背景色：#CECE99；
颜色：黑色；
}
.电影信息：hover.dropbtn{
背景色：#A774；
颜色：白色；
}

下拉按钮
成形按钮
你需要JS。如果试图寻址子元素，则只能使用：hover元素。由于您案例中的按钮和表单是同级的，它们不能用纯HTML或CSS来处理。我如何用JS来处理它们？太好了！非常感谢。如何将其应用于下拉按钮？在悬停第一个和第二个重定向时会改变其颜色？预祝您万事如意！我编辑了anwser以显示您在这方面有JS工作。然而，阅读abotu JS的实际基础教程可能是值得的。它并不像第一次听起来那么复杂，但特别是用JS做基本的风格改变可能需要30-60分钟的学习时间。
.movie-info:hover .dropbtn{
background-color: #A7A774;
color: white;
}