| <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> |
