87,841
社区成员




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery提示框鼠标滑过图片提示框</title>
<meta name="description" content="jquery浮动提示框,制作鼠标滑过图片提示文本框信息,可自定义设置浮动提示框显示位置。" />
</head>
<body>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){
var a;
$(".cover-list li").hover(function(){
if(a){
window.clearTimeout(a)
}
var c=this;
a=window.setTimeout(function(){
var g=$(".detail-frame",c).html();
var i=$("img",c).offset().left;
var h=$("img",c).offset().top;
if($(c).width()==150){
var j=160
}else{
var j=$("img",c).width()+10
}
$("body").append('<div class="detail-tip"></div>');
if($(c).hasClass("r-end")){
$(".detail-tip").html(g).append('<span class="arrow-right"></span>').css("left",i+j-492).css("top",h);
}else{
$(".detail-tip").html(g).append('<span class="arrow-left"></span>').css("left",i+j).css("top",h);
}
},200)
},function(){
if(a){
window.clearTimeout(a)
}
$(".detail-tip").remove()
});
});
</script>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
/* cover-list */
.cover-list{width:670px;margin:20px auto;}
.cover-list li{float:left;margin:0 15px 15px 0;display:inline;width:152px;height:150px;overflow:hidden;}
/* detail-frame */
.detail-frame{display:none;}
.arrow-left{position:absolute;width:6px;height:9px;top:30px;left:0;margin-left:-6px;background:url(images/arrow_gray.gif) no-repeat;}
.arrow-right{position:absolute;width:6px;height:9px;top:30px;left:320px;background:url(images/arrow_gray.gif) no-repeat -6px 0;}
.detail-tip{position:absolute;width:300px;background:#fff;border:1px solid #ddd;padding:10px;}
.detail-tip h2{font-size:12px;line-height:18px;color:#3366cc;}
.detail-tip p{margin:10px 0 0 0;font-size:14px;}
</style>
<div class="cover-list">
<ul>
<li>
<div class="detail-frame">
<h2>flash导航条制作二级菜单子菜单的flash导航条源码</h2>
<p>flash导航条制作一个鼠标滑过显示动画二级菜单栏目的flash导航条源码,flash导航条下载二级菜单源码。</p>
</div>
<a href="#" target="_blank"><img width="150" height="150" alt="flash导航条制作二级菜单子菜单的flash导航条源码" src="images/smallee5978bd2682039e1d65aed3a8a02ab6.jpg" /></a>
</li>
<li>
<div class="detail-frame">
<h2>flash导航条制作二级菜单子菜单的flash导航条源码</h2>
<p>flash导航条制作一个鼠标滑过显示动画二级菜单栏目的flash导航条源码,flash导航条下载二级菜单源码。</p>
</div>
<a href="#" target="_blank"><img width="150" height="150" alt="flash导航条制作二级菜单子菜单的flash导航条源码" src="images/smallee5978bd2682039e1d65aed3a8a02ab6.jpg" /></a>
</li>
<li>
<div class="detail-frame">
<h2>div+css多张背景图片规范写法图片透明度显示</h2>
<p>div+css教程多张背景图片最规范的书写方法,当鼠标滑过A标签背景图片透明度显示。</p>
</div>
<a href="#" target="_blank"><img width="150" height="150" alt="div+css布局限制图片最大宽度图片垂直居中(兼容IE6/IE7/IE8/FF)" src="images/smallda1a1ff8828722e330aa7e7d89e287db.jpg" /></a>
</li>
<li class="r-end">
<div class="detail-frame">
<h2>div+css制作在IE6 上用absolute模拟fixed IE6浏览器定位层框不闪动</h2>
<p>用div+css制作浏览器浮动菜单定位层,IE6 浏览器上用absolute模拟fixed,浮动菜单定位层随页面滚动不闪动。只需用div+css就能控制浮动定位层,兼容IE6以上浏览器,是一个很不错的IE6浮动定位层解决方案。</p>
</div>
<a href="#" target="_blank"><img width="150" height="150" alt="div+css制作在IE6 上用absolute模拟fixed IE6浏览器定位层框不闪动" src="images/smalla4c7c67dec86de131924d9e69e745e18.jpg" /></a>
</li>
</ul>
</div>
</body>
</html>
$(function(){
var a;
//给选择的列表项绑定两个事件,第一个是鼠标移动到列表项上触发的,第二个是鼠标移开时触发的
$(".cover-list li").hover(function(){
if(a){
//事先清除定时器函数
window.clearTimeout(a)
}
var c=this;
a=window.setTimeout(function(){
//这里的c就是上面选择的li,也就是列表项
//这句话的意思是选择列表项中的类名为.detail-frame的div的内容
var g=$(".detail-frame",c).html();
//获得图片相对于文档的便宜,是两个数值,单位是像素
var i=$("img",c).offset().left;
var h=$("img",c).offset().top;
//如果列表项的宽度为150,则j=160,否则j=img元素的宽度+10
if($(c).width()==150){
var j=160
}else{
var j=$("img",c).width()+10
}
//在body中插入class="detail-tip"的div
$("body").append('<div class="detail-tip"></div>');
//如果列表项有r-end的属性
if($(c).hasClass("r-end")){
//那么就在这个div中加入下面的元素,并设置位置(class="arrow-right"定义的要么是css sprite的图片,要么是文字图标,显示是图片)
$(".detail-tip").html(g).append('<span class="arrow-right"></span>').css("left",i+j-492).css("top",h);
}else{
//否则……两个位置不同,这些位置都是经过计算的
$(".detail-tip").html(g).append('<span class="arrow-left"></span>').css("left",i+j).css("top",h);
}
},200)
},function(){
//鼠标离开列表项时清除定时器,移除div
if(a){
window.clearTimeout(a)
}
$(".detail-tip").remove()
});
});
</script>
$(function(){
var a;
$(".cover-list li").hover(function(){
if(a){
window.clearTimeout(a)
}
var c=this;
a=window.setTimeout(function(){
var g=$(".detail-frame",c).html();
var i=$("img",c).offset().left;
var h=$("img",c).offset().top;
if($(c).width()==150){
var j=160
}else{
var j=$("img",c).width()+10
}
$("body").append('<div class="detail-tip"></div>');
if($(c).hasClass("r-end")){
$(".detail-tip").html(g).append('<span class="arrow-right"></span>').css("left",i+j-492).css("top",h);
}else{
$(".detail-tip").html(g).append('<span class="arrow-left"></span>').css("left",i+j).css("top",h);
}
},200)
},function(){
if(a){
window.clearTimeout(a)
}
$(".detail-tip").remove()
});
});
</script>
出现了三个 img ,不知道该怎么修改,让鼠标经过文字的时候,弹出窗口$(".cover-list li").hover(function(){});
改成
$(".cover-list li div").hover(function(){});
或者
$(".cover-list li h2").hover(function(){});
或者
$(".cover-list li p").hover(function(){});
你可以分别试试效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery提示框鼠标滑过图片提示框</title>
<meta name="description" content="jquery浮动提示框,制作鼠标滑过图片提示文本框信息,可自定义设置浮动提示框显示位置。" />
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.0.min.js"></script>
<script type="text/javascript">
$(function(){
var a;
$(".cover-list li").hover(function(){
if(a){
window.clearTimeout(a)
}
var c=this;
a=window.setTimeout(function(){
var g=$(".detail-frame",c).html();
var i=$("img",c).offset().left;
var h=$("img",c).offset().top;
if($(c).width()==150){
var j=160
}else{
var j=$("img",c).width()+10
}
$("body").append('<div class="detail-tip"></div>');
if($(c).hasClass("r-end")){
$(".detail-tip").html(g).append('<span class="arrow-right"></span>').css("left",i+j-492).css("top",h);
}else{
$(".detail-tip").html(g).append('<span class="arrow-left"></span>').css("left",i+j).css("top",h);
}
},200)
},function(){
if(a){
window.clearTimeout(a)
}
$(".detail-tip").remove()
});
});
</script>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
/* cover-list */
.cover-list{width:670px;margin:20px auto;}
.cover-list li{float:left;margin:0 15px 15px 0;display:inline;width:152px;height:150px;overflow:hidden;}
/* detail-frame */
.detail-frame{display:none;}
.arrow-left{position:absolute;width:6px;height:9px;top:30px;left:0;margin-left:-6px;background:url(images/arrow_gray.gif) no-repeat;}
.arrow-right{position:absolute;width:6px;height:9px;top:30px;left:320px;background:url(images/arrow_gray.gif) no-repeat -6px 0;}
.detail-tip{position:absolute;width:300px;background:#fff;border:1px solid #ddd;padding:10px;}
.detail-tip h2{font-size:12px;line-height:18px;color:#3366cc;}
.detail-tip p{margin:10px 0 0 0;font-size:14px;}
</style>
<div class="cover-list">
<ul>
<li>
<div class="detail-frame">
<h2>flash导航条制作二级菜单子菜单的flash导航条源码</h2>
<p>flash导航条制作一个鼠标滑过显示动画二级菜单栏目的flash导航条源码,flash导航条下载二级菜单源码。</p>
</div>
<a href="#" target="_blank">
鼠标放上去会有弹出层
</a>
</li>
<li>
<div class="detail-frame">
<h2>flash导航条制作二级菜单子菜单的flash导航条源码</h2>
<p>flash导航条制作一个鼠标滑过显示动画二级菜单栏目的flash导航条源码,flash导航条下载二级菜单源码。</p>
</div>
<a href="#" target="_blank">
鼠标放上去会有弹出层
</a>
</li>
<li>
<div class="detail-frame">
<h2>div+css多张背景图片规范写法图片透明度显示</h2>
<p>div+css教程多张背景图片最规范的书写方法,当鼠标滑过A标签背景图片透明度显示。</p>
</div>
<a href="#" target="_blank"><img width="150" height="150" alt="div+css布局限制图片最大宽度图片垂直居中(兼容IE6/IE7/IE8/FF)" src="images/smallda1a1ff8828722e330aa7e7d89e287db.jpg" /></a>
</li>
<li class="r-end">
<div class="detail-frame">
<h2>div+css制作在IE6 上用absolute模拟fixed IE6浏览器定位层框不闪动</h2>
<p>用div+css制作浏览器浮动菜单定位层,IE6 浏览器上用absolute模拟fixed,浮动菜单定位层随页面滚动不闪动。只需用div+css就能控制浮动定位层,兼容IE6以上浏览器,是一个很不错的IE6浮动定位层解决方案。</p>
</div>
<a href="#" target="_blank"><img width="150" height="150" alt="div+css制作在IE6 上用absolute模拟fixed IE6浏览器定位层框不闪动" src="images/smalla4c7c67dec86de131924d9e69e745e18.jpg" /></a>
</li>
</ul>
</div>
</body>
</html>
在哪一块添加...我对代码不懂