首页
前端开发
Javascript
jQuery悬停显示信息交互

jQuery悬停显示信息交互

0 次浏览 0 条评论
rar
rar

鼠标悬停就显示信息的交互，在前端里算是老朋友了。用jQuery搞定也挺省事，写起来简单，响应还快。

hover事件其实就是把mouseenter和mouseleave合并了一下，鼠标进来执行一段，移出去再来一段，用法直观。

比如你有个.hover-element的卡片，想让里面的.info-block提示框在鼠标悬停时显示，只要一段hover就能搞定：

$(document).ready(function() {
  $('.hover-element').hover(
    function() {
      $(this).find('.info-block').show();
    },
    function() {
      $(this).find('.info-block').hide();
    }
  );
});

搭配点CSS样式，再加个图标或小动画，页面就更有感觉了。项目里还会有个demo.html来演示这个交互，方便你直接预览。

图片资源率放在images文件夹里，样式也许能让提示信息更生动，比如鼠标一悬浮就切换背景图。嗯，视觉反馈也别小看，挺加分的。

，这种用jQuery做的悬停效果，适合新手上手练练手，也适合老手快速搭建个交互页面。如果你刚好想加个提示信息，不妨参考一下。

rar 文件大小：69.25KB