前端开发

 首页 > 前端开发 > jquery教程 > 用jquery模仿的a的title属性的例子_jquery_自学php网

用jquery模仿的a的title属性的例子_jquery_自学php网

分享到:
【字体:
导读:
          用jQuery实现的模仿a的title属性的例子,在测试的时候ie6,7上出现了层次混乱,下面是解决方法,感兴趣的朋友可以看看...

用jQuery实现的模仿a的title属性的例子,在测试的时候ie6,7上出现了层次混乱,不过最终解决了。

html代码如下:

css代码如下

* {
margin:0;
padding:0;
}
body {
font-size:12px;
}
.wrap {
width:600px;
margin:100px auto;
}
.clearfix:after, .clearfix:before {
display:table;
content: "";
}
.clearfix:after {
clear:both;
overflow: hidden;
}
.clearfix {
zoom: 1;
}
.list {
position:relative; //作为定位的父元素,li直接做父元素出现元素内容重叠问题
}
.list li {
list-style:none;
width:100px;
height:24px;
line-height:24px;
margin-right:10px;
float:left;
}
.list li a {
text-decoration:none;
color:#333;
display:block;
}
.show {
position:absolute;
width:100px;
background:#FFFFE1;
border:1px solid #ffcc01;
padding:6px;
display:none;
z-index:5;
margin-top:10px; //代替top
margin-left:60px; //代替left
}
.show p {
height:18px;
line-height:18px;
}
.list li a:hover {
text-decoration:underline;
color:#FF0000;
}

jQuery代码如下:

预览效果;

分享到:
运用jQuery定时器的原理实现banner图片切...
主要运用了定时器的原理,bind,trigger应用等 banner切换实现 /* * @description: banner切换样式 * @author: lanfeng(beryl) * @time:2013-02-26 */ /* reset*/ *{ margin: 0; padding: 0;} body{font:12px/1.5 Tahoma,'\5B8B\4F53',arial,Tahoma,helvetica,sans-serif; color:#333333;b...
jquery实现导航固定顶部的效果仿蘑菇街_j...
jquery实现导航固定顶部的效果,仿蘑菇街的,感觉还不错,需要的朋友可以参考下 无标题文档 $(document).ready(function(){ var headHeight=$(".header").height()+10; var nav=$(".nav"); $(window).scroll(function(){ if($(this).scrollTop()>headHeight){ nav.addClass("navFix"); } else{ n...
  •         php迷,一个php技术的分享社区,专属您自己的技术摘抄本、收藏夹。
  • 在这里……