效果截图

HTML结构为:

<div class="activityBox">
<ul class="activityTab">
<li style="MARGIN-RIGHT: 3px" id="FlashSale" class="active">折扣专区</li>
<li style="MARGIN-RIGHT: 3px" id="NewArrivals" class="">团购推荐</li>
<li id="BeautyTuan" class="">特卖推荐</li>
</ul>
<ul style="display: block;" id="FlashSaleCenter" class="activityCenter">
中间内容区
</ul>
<ul id="NewArrivalsCenter" class="activityCenter" style="display: none;">
中间内容区
</ul>
<ul id="BeautyTuanCenter" class="activityCenter" style="display: none;">
中间内容区
</ul>
</div>

JS代码为:

$(function(){
//左右切换效果
$(".activityTab li").live("hover",function(){
$(".activityTab li").removeClass("active");
$(this).addClass("active");
$(".activityCenter").css("display","none");
var activityTabID=$(this).attr("id");
$("#"+activityTabID+"Center").show();
return false;
});
});

jquery html 鼠标悬浮出现列表切换的更多相关文章

  1. 一款基于jquery的鼠标经过图片列表特效

    今天要给大家推荐一款基于jquery的鼠标经过图片列表特效.当鼠标经过列表图片的时候,图片放大,且有一个半透明的遮罩层随之移动.效果图如下: 在线预览   源码下载 实现的代码 html代码: < ...

  2. 浅谈CSS和JQuery实现鼠标悬浮图片放大效果

    对于刚刚学习网页前台设计的同学一定对图片的处理非常苦恼,那么这里简单的讲解一下几个图片处理的实例. 以.net为平台,微软的Visual Studio 2013为开发工具,当然前台技术还是采用CSS3 ...

  3. 鼠标悬浮弹出标题制作JQuery

    今天给客户制作的网站里面加个效果,当鼠标在列表图片之外时,标题不显示,当鼠标悬浮在图片之上时,标题从底部弹出. 效果图如下: 鼠标悬浮前: 鼠标悬浮后: html代码如下: <ul class= ...

  4. 一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件

    一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件 在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> ...

  5. jQuery鼠标悬停内容动画切换效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 使用JS实现鼠标悬浮切换显示

    实现的是在鼠标悬停在不同链接上,在同一位置切换显示想要显示的内容 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...

  7. jquery特效(5)—轮播图③(鼠标悬浮停止轮播)

    今天很无聊,就接着写轮播图了,需要说明一下,这次的轮播图是在上次随笔中jquery特效(3)—轮播图①(手动点击轮播)和jquery特效(4)—轮播图②(定时自动轮播)的基础上写出来的,也就是本次随笔 ...

  8. 自定义jq插件,鼠标悬浮展示图片或者视频放大图,可自定义展示内容

    网站项目经常会遇到一些视频或者图片素材的展示功能,那么就需要自己写一个功能,就是在一些列表页面你想要是这个数据的详细内容,弹框在页面某个位置 例如这是视频悬浮展示效果,可自定义自动播放等属性标签 又例 ...

  9. 重写TreeView,多层级节点下批量显示图片,图片支持缩略图和文件名列表切换,支持调用者动态匹配选中,支持外界拖入图片并添加到对应节点下

    1.先看下整体效果 2.前端代码 <UserControl x:Class="iPIS.UI.Base.Tree.ImageTreeControl" xmlns=" ...

随机推荐

  1. AR中的SLAM(一)

    写在前面 本系列打算讲讲个人对AR行业和AR中的SLAM算法的一点浅显的看法.才疏学浅,文中必然有很多疏漏和不足,还望能和大家多多讨论.今天先讲讲我对AR的一些认识. AR的一点理解 AR是什么 AR ...

  2. python匿名函数 高阶函数 内置函数 文件操作

    1.匿名函数 匿名就是没有名字 def func(x,y,z=1): return x+y+z 匿名 lambda x,y,z=1:x+y+z #与函数有相同的作用域,但是匿名意味着引用计数为0,使用 ...

  3. 【眼见为实】自己动手实践理解数据库READ UNCOMMITED && SERIALIZABLE

    目录 准备工作 ①准备测试表和测试数据 ②关闭数据库事务自动提交 ③设置InnoDB存储引擎隔离级别 [READ UNCOMMITTED] [READ UNCOMMITTED]能解决的问题 [READ ...

  4. AIX用裸设备给表空间添加数据文件

    近期在对生产数据库表空间进行扩容,目的是春节期间保证表空间的使用率,不会出现紧急告警信息. 1.查看表空间使用率的SQL语句 col tablespace_name for a16 col SUM_S ...

  5. 关于 ExpressRoute 的虚拟网络网关

    虚拟网络网关用于在 Azure 虚拟网络和本地位置之间发送网络流量. 配置 ExpressRoute 连接时,必须创建并配置虚拟网络网关和虚拟网络网关连接. 创建虚拟网络网关时,需要指定几项设置. 其 ...

  6. Vue2学习笔记:数据交互vue-resource

    基本语法 必须引入一个库:vue-resource github地址 // 基于全局Vue对象使用http Vue.http.get('/someUrl', [options]).then(succe ...

  7. mblog相关

    Mblog mblog(mini blog) 是一个用Java实现的多人博客, 使用 mysql 数据库. 使用的框架: Bootstrap 3 Spring mvc Velocity Hiberna ...

  8. 远程监视jboss应用java内存的配置

    前言 因为最近一个项目部署在客户那边运行一个月左右就会出现java内存溢出的问题,为了时时监控java内存的情况需要,需要远程查看服务器上java内存的一些情况.在公司模拟部署了远程监视linux下项 ...

  9. TreeView控件概述、属性与方法

    1.作用:用于显示Node结点的分层列表.2.添加到控件箱菜单命令:工程 | 部件,在部件对话框中选择:Microsoft Windows Common Controls 6.03.TreeView控 ...

  10. 名词解释:Linux内存管理之RSS和VSZ

    Linux内存管理中不管是top命令还是pmap命令,都会有RSS和VSZ这两个名词,这里解释一下: RSS( Resident Set Size )常驻内存集合大小,表示相应进程在RAM中占用了多少 ...