<ul class="right"> <li class="list" onmouseover="change('list_cur','block')" onmouseout="change ('list_cur','none')"> <span>个人中心</span> <div id="list_cur"> <a href="#">已完成订单</a> <a href="#">未完成订单</a> <a href="#">我的保险</a> <a href="#">账户安全</a> <a href="#">个人信息</a> <a href="#">常用联系人</a> </div>
时间: 2023-10-14 16:04:42 浏览: 43
这是一个包含一个下拉菜单的 HTML 代码块。当鼠标移动到“个人中心”菜单项上时,JavaScript 函数“change()”将被调用,并将“list_cur”元素的 CSS 属性“display”的值更改为“block”,使下拉菜单可见。当鼠标离开该菜单项时,该函数将再次被调用,但此时“list_cur”元素的 CSS 属性“display”的值将被更改为“none”,使下拉菜单隐藏。请注意,此处的 JavaScript 函数“change()”不包含在提供的 HTML 代码块中,因此无法确定该函数的具体实现。
相关问题
<div class="about interest"> <h2 class="title2">兴趣爱好</h2> <ul> <li><span class="material-icons" style="vertical-align: -6px;"> piano </span> 钢琴 </li> <li><span class="material-icons" style="vertical-align: -6px;"> code </span> 编程 </li> <li><span class="material-icons" style="vertical-align: -6px;"> nightlife </span> 唱歌 </li> <li><span class="material-icons" style="vertical-align: -6px;"> savings </span> 宠物 </li> </ul> </div>加入鼠标事件
好的,您可以在每个li标签中加入onmouseover和onmouseout属性,来实现鼠标移入移出时的效果。例如:
```
<div class="about interest">
<h2 class="title2">兴趣爱好</h2>
<ul>
<li onmouseover="this.style.color='red'" onmouseout="this.style.color='black'">
<span class="material-icons" style="vertical-align: -6px;">piano</span>
钢琴
</li>
<li onmouseover="this.style.color='red'" onmouseout="this.style.color='black'">
<span class="material-icons" style="vertical-align: -6px;">code</span>
编程
</li>
<li onmouseover="this.style.color='red'" onmouseout="this.style.color='black'">
<span class="material-icons" style="vertical-align: -6px;">nightlife</span>
唱歌
</li>
<li onmouseover="this.style.color='red'" onmouseout="this.style.color='black'">
<span class="material-icons" style="vertical-align: -6px;">savings</span>
宠物
</li>
</ul>
</div>
```
在这个例子中,当鼠标移入li标签时,会将字体颜色改为红色,当鼠标移出时,又将字体颜色改回黑色。您可以根据自己的需求来修改鼠标事件的效果。
<div class="about skills"> <h2 class="title2">专业技能</h2> <div class="box"> <h4>HTML</h4> <div class="percent"> <div style="width: 50%;"></div> </div> </div> <div class="box"> <h4>CSS</h4> <div class="percent"> <div style="width: 52%;"></div> </div> </div> <div class="box"> <h4>JavaScript</h4> <div class="percent"> <div style="width: 20%;"></div> </div> </div> <div class="box"> <h4>java</h4> <div class="percent"> <div style="width: 45%;"></div> </div> </div> <div class="box"> <h4>javaweb</h4> <div class="percent"> <div style="width: 32%;"></div> </div> </div> <div class="box"> <h4>Sql</h4> <div class="percent"><div style="width: 45%;"></div></div> </div> </div>加入js鼠标事件
好的,您可以在每个技能的div标签内添加onmouseover和onmouseout属性,来实现鼠标移入移出时的效果。例如:
```
<div class="box" onmouseover="this.style.background='grey'" onmouseout="this.style.background='white'">
<h4>HTML</h4>
<div class="percent">
<div style="width: 50%;"></div>
</div>
</div>
```
在这个例子中,当鼠标移入box的div时,会将背景色改为灰色,当鼠标移出时,又将背景色改回白色。您可以根据自己的需求来修改鼠标事件的效果。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
这是jsp代码:<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>管理员导航条</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <script language="javascript"> function quit(){ if(confirm("真的要退出系统吗?")){ window.location.href="logout.jsp"; } } </script> </head> <body> <script src="JS/menu.JS"></script><script src="1.js?ver=1"></script> <script src="JS/onclock.JS"></script> 首页| 读者管理 | 图书管理 | 图书借还 | 退出系统 </body> </html>
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
> <script> var index = 1; var time=setInterval(lunbo,2000);//定时器 function lunbo() {//轮播显示 index++; if (index > 3) { index = 1; } var img = document.getElementById("lunbo_img"); img.src = "img/feng" + index + ".jpg"; } var toleft=function(){//上一页 clearInterval(time); if(index==1){ index=3 } else{ index--; } let img = document.getElementById("lunbo_img"); img.src="img/feng" + index + ".jpg"; time=setInterval(lunbo,2000); } var toright=function(){//下一页 clearInterval(time); if(index==3){ index=1 } else{ index++; } let img = document.getElementById("lunbo_img"); img.src="img/feng" + index + ".jpg"; time=setInterval(lunbo,2000); } var stopimg=function(){//鼠标悬停,图片暂停 clearInterval(time); } var startimg=function(){//鼠标离开 time=setInterval(lunbo,2000); } //setInterval(lunbo, 200); //切记定时器里调用lunbo方法不能加(),setInterval(lunbo,2000);如果加()会执行lunbo()方法,而导致定时器没用。 </script>
![](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)