| <style type="text/css"> |
| |
#kuang{ |
| |
width: 300px; |
| |
height: 400px; |
| |
border: 1px solid red; |
| |
border-radius: 5px; |
| |
margin: 0 auto; |
| |
overflow: hidden; |
| |
} |
| |
#shang{ |
| |
width: 300px; |
| |
height: 200px; |
| |
border: 1px solid blue; |
| |
|
| |
text-align: center; |
| |
line-height: 200px; |
| |
color: white; |
| |
border-radius: 150px; |
| |
transition: 1s; /* 过渡 */ |
| |
|
| |
} |
| |
#xia{ |
| |
width: 300px; |
| |
height: 200px; |
| |
text-align: center; |
| |
line-height: 200px; |
| |
border-radius: 50%; |
| |
} |
| |
</style> |
| |
</head> |
| |
<body> |
| |
<div id="kuang"> |
| |
<div id="shang"> |
| |
上 |
| |
</div> |
| |
<div id="xia"> |
| |
下 |
| |
</div> |
| |
</div> |
| |
</body> |
| |
</html> |
| |
<script type="text/javascript"> |
| |
|
| |
//首先找到元素 |
| |
//鼠标移入移出之后 1、边框改变 2、内容的改变 |
| |
var kuang = document.getElementById("kuang") |
| |
var shang = document.querySelector("#shang") |
| |
var xia = document.querySelector("#xia") |
| |
kuang.onmouseover = function(){ |
| |
shang.style.borderRadius = "5px" |
| |
xia.style.borderRadius = "5px" |
| |
shang.innerHTML = "新上内容" |
| |
xia.innerHTML = "新下内容" |
| |
} |
| |
kuang.onmouseout = function(){ |
| |
shang.style.borderRadius = "150px" |
| |
xia.style.borderRadius = "150px" |
| |
shang.innerHTML = "上" |
| |
xia.innerHTML = "下" |
| |
} |
| |
</script> |
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· 什么是nginx的强缓存和协商缓存
· 一文读懂知识蒸馏
· Manus爆火，是硬核还是营销？