摘要:语法:hover(over,out)over:鼠标移上元素要出发的一个函数,out:鼠标移出元素要触发的一个函数!例:$('选择器').hover(function(){移上要做的事件},function(){移出要做的事件})toggle() //如果元素可见的,就切换为隐藏,否则相反!总结:hove内部必须写两个函数,函数之间用逗号隔开。toggle()是判断元素是否可见如果可
语法:
hover(over,out)
over:鼠标移上元素要出发的一个函数,out:鼠标移出元素要触发的一个函数!
例:$('选择器').hover(
function(){
移上要做的事件
},
function(){
移出要做的事件
}
)
toggle() //如果元素可见的,就切换为隐藏,否则相反!
总结:hove内部必须写两个函数,函数之间用逗号隔开。toggle()是判断元素是否可见如果可见就执行隐藏,如果不可见就执行显示效果!
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> <style> .box{ width: 218px;height: 170px; position: relative;top: 60px;left: 60px; box-shadow: 1px 3px 7px #ccc; } .box img{ width: 218px;height: 130px; border-radius: 10px; } .box span{ color: #ccc; font-size: 10px; padding: 5px 20px; position: absolute;z-index: 10;/*层级z-index必须在定位后面*/ } .box p{ height: 80px; padding: 0 20px; background: #fff; font-size: 14px; text-indent: 2em; position: absolute;top: 65px; border-radius: 10px; } </style> </head> <body> <div class="box"> <img src="http://img.php.cn/upload/course/000/126/153/5acc118f11d6b969.jpg" alt=""> <p>javaScript极速入门_玉女心经系列</p> <span>123人在看</span> </div> <script src="jQuery/jQuery-3.3.1.js"></script> <script> $(function(){ $('.box').hover( function(){ $('p').stop().animate({'top':'40px'}) // stop()是停止当前动画 // animate() 方法执行 CSS 属性集的自定义动画。 }, function(){ $('p').stop().animate({'top':'65px'}) }) }) </script> </body> </html>
批改老师:灭绝师太批改时间:2019-01-11 13:46:18
老师总结:很棒,有好好听课哦!jq的知识点主要就是需要运用,学以致用很重要,还是要多多练习哒