鼠标移入移出改变div颜色,通过点击按钮隐藏或者显示div
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq的切换动画</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
div{width: 200px;height: 200px;margin: 0 auto;border: 1px solid black;}
button{display: block;margin: 0 auto;}
</style>
</head>
<body>
<div></div>
<button>点击显示/隐藏</button>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('div').hover(function(){
$(this).css('background','pink');
},function(){
$(this).css('background','#fff');
})
$('button').click(function(){
$('div').toggle();
})
})
</script>
</html>笔记:
hover(over,out)鼠标的移入移出事件
toggle() 如果元素是可见的,就隐藏,否则相反