js当鼠标经过两个标题时,显示该标题对应的下拉菜单,且将该标题的字体颜色任意改变一个颜色; 当鼠标移开后面两个标题时,隐藏该标题对应的下拉菜单,且将该标题的字体颜色恢复到初始状态。
时间: 2024-02-20 21:57:31 浏览: 30
可以通过以下的JavaScript代码来实现这个功能:
```javascript
// 获取标题元素和下拉菜单元素
var title1 = document.getElementById("title1");
var title2 = document.getElementById("title2");
var menu1 = document.getElementById("menu1");
var menu2 = document.getElementById("menu2");
// 当鼠标移动到标题1时,显示下拉菜单1并改变标题1的字体颜色
title1.onmouseover = function() {
menu1.style.display = "block";
title1.style.color = "red";
}
// 当鼠标移开标题1时,隐藏下拉菜单1并恢复标题1的字体颜色
title1.onmouseout = function() {
menu1.style.display = "none";
title1.style.color = "black";
}
// 当鼠标移动到标题2时,显示下拉菜单2并改变标题2的字体颜色
title2.onmouseover = function() {
menu2.style.display = "block";
title2.style.color = "blue";
}
// 当鼠标移开标题2时,隐藏下拉菜单2并恢复标题2的字体颜色
title2.onmouseout = function() {
menu2.style.display = "none";
title2.style.color = "black";
}
```
需要注意的是,上述代码中的 `title1`、`title2`、`menu1`、`menu2` 分别表示 HTML 中对应的标题元素和下拉菜单元素的 ID。在实际使用中,需要将这些 ID 替换为实际使用的元素 ID。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)