鼠标移入和鼠标移出的提示:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #DIV{ width: 100px; height: 70px; border: 1px solid #aaaa22; display: none; } </style> </head> <body> <lable onmouseover="document.getElementById('DIV').style.display='block';" onmouseout="document.getElementById('DIV').style.display='none';"> <input type="checkbox" >自动登录</lable> <div id="DIV">选择需要谨慎</div> </body> </html>
注:lable标签的主要作用就是用来做一个框,鼠标进入这个框,就会显示提示内容,如果没有lable标签,只有当鼠标在按钮上时才显示提示内容。
鼠标移入和鼠标移出的样式的转换:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 100px; height: 70px; border: 1px solid #aaaa22; } .box1{ width: 200px; height: 100px; border: 1px solid red; background-color: red; } </style> </head> <body> <div id="DIV" onmouseover="document.getElementById('DIV').className='box1';" onmouseout="document.getElementById('DIV').className='';"></div> </body> </html>