jQuery书签效果 - 1

最新推荐文章于 2022-12-06 15:18:05 发布

nospeak

最新推荐文章于 2022-12-06 15:18:05 发布

阅读量315

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery 文章标签： jQuery CSS ViewUI

本文链接：https://blog.youkuaiyun.com/nospeak/article/details/83812917

jquery 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的鼠标悬停效果，通过简单的JavaScript代码增强了网页元素的交互体验。当鼠标移至指定区域时，该区域会显示更多信息并改变样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>