一。当鼠标浮上时有提示：
效果原理是:鼠标移上display为block,鼠标移走display为none;
用js事件
当......的时候：onmouseover,onmouseout
alert的使用
获取元素：1.id;
2.doucument.getElementById
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
#div1{
width: 100px;
height: 20px;
background: yellow;
display: none;
}
</style>
</head>
<body>
<label onmouseover="document.getElementById('div1').style.display='block';"
onmouseout="document.getElementById('div1').style.display='none';">
<input type="checkbox"
/>自动登录</label>
//为什么这里会用到label标签呢，因为如果想让鼠标浮在文字上时也出来提示内容，就要用label把它们包起来
<div id="div1"></div>
</body>
</html>
二。用js换class名
因为id的优先级大于class，所以
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
#div1{
width: 100px;
height: 20px;
background: yellow;
display: none;
}
#div2{
width: 100px;
height: 100px;
background: red;
}
.div3{
width: 200px;
height: 200px;
background: green;
}
</style>
</head>
<body>
<label onmouseover="document.getElementById('div1').style.display='block';"
onmouseout="document.getElementById('div1').style.display='none';">
<input type="checkbox"
/>自动登录</label>
<div id="div1">
努力学习2
</div>
<divid="div2" onmouseover="document.getElementById('div2').className='div3';"
onmouseout="document.getElementById('div2').className='';">
</div>
</body>
</html>
不能得到我们想要的结果
但是如果把#div2{
width: 100px;
height: 100px;
background: red;
}
改成div{
width: 100px;
height: 100px;
background: red;
}
就可以得到想要的结果
如果不这样，可以用js来实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
#div1{
width: 100px;
height: 20px;
background: yellow;
display: none;
}
#div2{
width: 100px;
height: 100px;
background: red;
}
.div3{
width: 200px;
height: 200px;
background: green;
}
</style>
</head>
<body>
<label onmouseover="document.getElementById('div1').style.display='block';"
onmouseout="document.getElementById('div1').style.display='none';">
<input type="checkbox"
/>自动登录</label>
<div id="div1">
努力学习2
</div>
<div id="div2" onmouseover="document.getElementById('div2').style.width='200px';
document.getElementById('div2').style.height='200px';
document.getElementById('div2').style.background='yellow';"
onmouseout="document.getElementById('div2').style.width='100px';
document.getElementById('div2').style.height='100px';
document.getElementById('div2').style.background='red';">
</div>
</body>
</html>
对其进行修改和完善如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
#div1{
width: 100px;
height: 20px;
background: yellow;
display: none;
}
#div2{
width: 100px;
height: 100px;
background: red;
}
.div3{
width: 200px;
height: 200px;
background: green;
}
</style>
<script>
function Toyellow(){//封装函数
var obj=document.getElementById('div2').style;
obj.width='200px';
obj.height='200px';
obj.background='yellow';
}
function Tored(){
var obj=document.getElementById('div2').style;
obj.width='100px';
obj.height='100px';
obj.background='red';
}
</script>
</head>
<body>
<label onmouseover="document.getElementById('div1').style.display='block';"
onmouseout="document.getElementById('div1').style.display='none';">
<input type="checkbox"
/>自动登录</label>
<div id="div1">
努力学习2
</div>
<div id="div2" onmouseover="Toyellow()"
onmouseout="Tored()">
</div>
</body>
</html>
<!-- 改变div样式效果的代码简化 实现行为，样式，结构相分离-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
#div1{
width: 100px;
height: 20px;
background: yellow;
display: none;
}
#div2{
width: 100px;
height: 100px;
background: red;
}
.div3{
width: 200px;
height: 200px;
background: green;
}
</style>
<script>
window.onload=function(){
var o=document.getElementById('div2');
o.onmouseover=Toyellow;
o.onmouseout=Tored;
}
function Toyellow(){
var obj=document.getElementById('div2').style;
obj.width='200px';
obj.height='200px';
obj.background='yellow';
}
function Tored(){
var obj=document.getElementById('div2').style;
obj.width='100px';
obj.height='100px';
obj.background='red';
}
</script>
</head>
<body>
<label onmouseover="document.getElementById('div1').style.display='block';"
onmouseout="document.getElementById('div1').style.display='none';">
<input type="checkbox"
/>自动登录</label>
<div id="div1">
努力学习2
</div>
<div id="div2" >
</div>
</body>
</html>
三。网页换肤：
首先要准备几套css样式表，点击时改变的是它的herf值
Onclick=”document.getElementById(‘link1’).href=’css1.css’;”