鼠标经过图片弹出信息框修改成鼠标经过文字弹出信息框

iamgoodhuman 2015-06-23 12:03:19





<!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>



这个效果时鼠标经过是,弹出信息框。我想要的效果是,当鼠标经过文字时,会有一个弹出信息,哪位大神能帮我修改一下~~


...全文
328 8 打赏 收藏 转发到动态 举报
写回复
用AI写文章
8 条回复
切换为时间正序
请发表友善的回复…
发表回复
Waitforsniping 2015-06-24
  • 打赏
  • 举报
回复
这个不是隐藏和显示,而是动态的添加和移除,我给你注释下代码,你看吧
$(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>
iamgoodhuman 2015-06-24
  • 打赏
  • 举报
回复
引用 4 楼 qq542369628 的回复:
$(".cover-list li").hover(function(){});
改成
$(".cover-list li div").hover(function(){});
或者
$(".cover-list li h2").hover(function(){});
或者
$(".cover-list li p").hover(function(){});
你可以分别试试效果
还是不中,原代码是 detail-frame 这个DIV隐藏起来,然后 鼠标经过图片的时候显示出来


$(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 ,不知道该怎么修改,让鼠标经过文字的时候,弹出窗口
Waitforsniping 2015-06-24
  • 打赏
  • 举报
回复
$(".cover-list li").hover(function(){});
改成
$(".cover-list li div").hover(function(){});
或者
$(".cover-list li h2").hover(function(){});
或者
$(".cover-list li p").hover(function(){});
你可以分别试试效果
iamgoodhuman 2015-06-24
  • 打赏
  • 举报
回复
引用 1 楼 qq542369628 的回复:
$(".cover-list li").hover()前面括号里面的是选择的元素,hover是鼠标悬浮的效果,现在的效果是鼠标放在列表项上显示的信息框,而这个列表项包含文字和图片,也就是说,不管你鼠标放在文件上还是图片上都会显示。当然,如果你非要鼠标放在文字上的话,可以在li后面加上div(两行文字)或者h2(第一行文字)或者p(第二行文字)以达到鼠标放到文字上面显示消息框的效果。



<!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>

在哪一块添加...我对代码不懂
iamgoodhuman 2015-06-24
  • 打赏
  • 举报
回复
引用 6 楼 qq542369628 的回复:
这个不是隐藏和显示,而是动态的添加和移除,我给你注释下代码,你看吧
$(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>
版主已经把这个问题解决啦~~谢谢啦~~
Go 旅城通票 2015-06-24
  • 打赏
  • 举报
回复
http://bbs.csdn.net/topics/391058187
Waitforsniping 2015-06-23
  • 打赏
  • 举报
回复
$(".cover-list li").hover()前面括号里面的是选择的元素,hover是鼠标悬浮的效果,现在的效果是鼠标放在列表项上显示的信息框,而这个列表项包含文字和图片,也就是说,不管你鼠标放在文件上还是图片上都会显示。当然,如果你非要鼠标放在文字上的话,可以在li后面加上div(两行文字)或者h2(第一行文字)或者p(第二行文字)以达到鼠标放到文字上面显示消息框的效果。
Go 旅城通票 2015-06-23
  • 打赏
  • 举报
回复
你的都是li里面显示的就是图片,哪来的文字,弹出显示的文字是浮动层里面的,默认隐藏了
思路:首先写DOM结构,先编写若干div,隐藏弹窗部分,设置display为none,添加完样式后,通过js来判断是否鼠标经过,当鼠标经过,则触发弹出提示事件,也就是将弹窗部分的display设置为block,鼠标移开,则将弹窗的display改为原始的none值。html

87,954

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧