jQuery书签效果 - 1

<script type="text/javascript" src="jquery-1.4.4.min.js" ></script>
<script>
  $(document).ready(function(){

    $(".bookmark").mouseover(function(){
      var selecter = $(this).attr("id");
      var sid = selecter.split("_")[1];
      $("#bookmark_" + sid).css({border:"1px solid #81c5ff"});
      $(this).css({background:"#f0f7fa"});
      $("#bookleg_" + sid).css({visibility:"visible"});
    });

    $(".bookmark").mouseout(function(){
      var selecter = $(this).attr("id");
      var sid = selecter.split("_")[1];
      $("#bookmark_" + sid).css({border:"1px solid #ffffff"});
      $(this).css({background:""});
      $("#bookleg_" + sid).css({visibility:"hidden"});
      $("#bookmarkinfo").hide();
    });
    
    /** 层随鼠标移动 **/
    $(".bookimg").mousemove(function(e){
      var mx = e.clientX + $(window).scrollLeft();   
      var my = e.clientY + $(window).scrollTop() + 20;
      $("#bookmarkinfo").css({visibility:"visible"});
      $("#bookmarkinfo").css({top:my+"px", left:mx+"px"});
      $("#bookmarkinfo").show();
    });
  });
</script>

你可能感兴趣的:(jquery,css)