jQuery实现悬浮显示效果

1.新建一个hmtl文件，一个CSS文件，一个JS文件

2.显示之前的图片

3.显示之后的图片

4.html代码

<div class="nav w1200"><a href="#" class="sp-kj" kj>商品分类</a><div class="kj-show2"><div class="kj-info1" mg="shiping"><dl class="kj-dl1"><dt><a href="#">食品/饮料/酒水</a></dt><dd>零食/糖果/巧克力、零食/糖果/巧克力、零食/糖果/巧克力、零食/糖果/巧克力、零食/糖果/巧克力</dd></dl><div class="kj-if-show" mg2="shiping" style="display: none;"><dl><dt>零食/糖果/巧克力</dt><dd><a href="#">膨化食品</a><a href="#">膨化食品</a><a href="#">膨化食品</a><a href="#">膨化食品</a></dd><div style="clear: both;"></div></dl><dl><dt>零食/糖果/巧克力</dt><dd><a href="#">膨化食品</a><a href="#">膨化食品</a><a href="#">膨化食品</a><a href="#">膨化食品</a><a href="#">膨化食品</a><a href="#">膨化食品</a><a href="#">膨化食品</a><a href="#">膨化食品</a></dd><div style="clear: both;"></div></dl><dl><dt>零食/糖果/巧克力</dt><dd><a href="#">膨化食品</a><a href="#">膨化食品</a><a href="#">膨化食品</a><a href="#">膨化食品</a><a href="#">膨化食品</a><a href="#">膨化食品</a><a href="#">膨化食品</a><a href="#">膨化食品</a></dd><div style="clear: both;"></div></dl><dl><dt>零食/糖果/巧克力</dt><dd><a href="#">膨化食品</a><a href="#">膨化食品</a><a href="#">膨化食品</a><a href="#">膨化食品</a></dd><div style="clear: both;"></div></dl></div></div><!-- kj-info1 结束 -->
</div>

5.css代码

.nav{position: relative;
}.nav .sp-kj{width: 267px;height: 47px;line-height: 47px;font-size: 16px;color: #fff;float: left;background: #F19F0B url(../img/sp-kj-bg.jpg) no-repeat 6px center;padding-left: 35px;position: relative;
}.nav .kj-show2{width: 302px;height: 560px;background-color: #2b2b2b;z-index: 2;position: absolute;top: 47px;left: 0px;
}.nav .kj-show2 .hover-show-bg{background-color: #FFFFFF;
}.nav .kj-show2 .hover-show-bg .kj-dl1 dt{background: url(../img/kj-show-dt-tu1-show.gif) no-repeat left center;
}.nav .kj-show2 .kj-info1{border-top: 1px solid #343434;border-bottom: 1px solid #000;
}.nav .kj-show2 .kj-dl1{padding: 5px 10px 5px;
}.nav .kj-show2 .kj-dl1 dt{padding-left: 20px;background: url(../img/kj-show-dt-tu1.gif) no-repeat left center;margin-bottom: 4px;
}.nav .kj-show2 .kj-dl1 dt a{font-size: 14px;font-weight: bold;color: #fff;
}.nav .kj-show2 .kj-dl1 dd{line-height: 30px;font-size: 14px;color: #fff;padding-left: 20px;
}.nav .kj-show2 .hover-show-bg .kj-dl1 dt a{color: #2B2B2B;
}.nav .kj-show2 .hover-show-bg .kj-dl1 dd{color:#2B2B2B;
}.nav .kj-show2 .kj-if-show{width: 680px;min-height: 558px;border: 1px solid #dbdbdb;border-left: none;background-color: #FFFFFF;position: absolute;top: 0;left: 302px;
}.nav .kj-show2 .kj-if-show dl{margin: 0px 11px;padding: 15px 8px;border-bottom: 1px solid #d5d5d5;
}.nav .kj-show2 .kj-if-show dl dt{width: 150px;font-size: 14px;color: #000;font-weight: bold;float: left;
}.nav .kj-show2 .kj-if-show dl dd{float: left;width: 490px;
}.nav .kj-show2 .kj-if-show dl dd a{display: inline-block;font-size: 14px;color: #000;margin-right: 30px;
}.nav .kj-show2 .kj-if-show dl dd a:hover{color:#F09E0B;
}.nav ul{float: left;
}.nav li{float: left;width: 112px;height: 47px;line-height: 47px;text-align: center;
}.nav li a{font-size: 15px;color: #1f1f1f;
}.nav li a:hover{color:#F09E0B;
}

6.jQuery代码

 $('[mg]').hover(function(){$(this).addClass('hover-show-bg');var a1=$(this).attr('mg');$('[mg2='+a1+']').show();},function(){$(this).removeClass('hover-show-bg');var a1=$(this).attr('mg');$('[mg2='+a1+']').hide();});

jQuery实现悬浮显示效果相关推荐

jQuery实现悬浮窗口
jQuery实现悬浮窗口我的独立博客 Marsguest's Blog 最近有这样的一个需求就是在网页上实现点击特定的控件实现弹出窗口进行一些表单的提交之类.最终实现的大致效果如下: 首先,应该明确 ...
css鼠标悬浮显示效果(鼠标手势)
鼠标悬浮显示效果将鼠标悬浮到下面超链接上看效果! css鼠标手型cursor中hand与pointer Example:CSS鼠标手型效果 CSS鼠标手型效果 Example:CSS鼠标手型效果 C ...
jQuery右下角悬浮广告
查看演示右下角悬浮广告是一种常见的网页广告展示方式,而且对用户浏览有干扰之嫌但对网站收益来说是很受站长们欢迎的.今天我给大家分享一个使用jQuery来实现网页右下角广告的实例.它的优点是可以从右下角 ...
css鼠标移入线条延中心伸长,jquery鼠标悬浮，显示动态延伸线条,如何在鼠标移开后依然让线条元素延伸到终点...
1.一个标题,鼠标悬浮时从图片中心伸出一个类似箭头指示的线条, 使用jquery hover添加类的方法给这个标题添加动画,动画是用css keyframes做的, 困惑的是有时候线条动画还没到终点鼠 ...
jQuery鼠标悬浮事件
今天学习了鼠标悬浮事件,跟小编来看看吧~ 先来看一下效果: 原本样式: 鼠标悬浮样式: 鼠标离开样式: 源码: <!DOCTYPE html> <html lang="en ...
html5底部悬浮添加到桌面,如何使用CSS3+JQuery实现悬浮墙式菜单
前言大家好,今天我要教你如何创建一个有用的悬停式用户界面,使用jQuery,CSS3,HTML5和@ font – face.你可能会问我,为什么是一个基于悬停的用户界面?好吧,由于现在很流行的基础 ...
jquery 鼠标悬浮和移除事件
直接贴代码 $('#mouse').mouseover(function () {alert("悬浮")// 处理悬浮的逻辑 }).mouseout(function () {al ...
IE8-下背景色半透明滤镜在jquery动画中失效问题记录
前两天,UIer跟我说,把这些按钮都悬浮在这个图片上!我心中千万头草泥马奔过,图片各种各样.花花绿绿.五颜六色的,这几个按钮也没有多大的光环围绕,用户一眼看上去恐怕会以为这是图片的一部分吧!~~~我假 ...
003_隐藏和显示效果
1. hide()方法 1.1. 如果被选的元素已被显示, 则隐藏该元素. 1.2. 语法: $(selector).hide(speed,callback); 1.3. 参数 1.4. 如果元素已经 ...

jQuery实现悬浮显示效果

jQuery实现悬浮显示效果相关推荐

最新文章

热门文章