jquery中hover()方法的学习

来源:互联网 发布:天文望远镜知乎 编辑:程序博客网 时间:2024/05/22 14:30

鼠标移动的一个特效:

<!DOCTYPE html><html><head>  <style>  ul { margin-left:20px; color:blue; }  li { cursor:default; }  span { color:red; }</style>  <script src="http://code.jquery.com/jquery-latest.js"></script></head><body>  <ul>    <li>Milk</li>    <li>Bread</li>    <li class='fade'>Chips</li>    <li class='fade'>Socks</li>  </ul><script>//添加鼠标移动的事件$("li").hover(  function () {//鼠标移动到这里,增加一段内容***    $(this).append($("<span> ***</span>"));  },   function () {//删除上一次增加的内容***    $(this).find("span:last").remove();  });//li with fade class//先淡出再显示这段内容$("li.fade").hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);});</script></body></html>


原创粉丝点击