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

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>



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


...全文
309 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，鼠标移开，则将弹窗...
js实现鼠标移到链接文字弹出一个提示层的方法
本文实例讲述了js实现鼠标移到链接文字弹出一个提示层的方法。分享给大家供大家参考。具体分析如下： 这里实现鼠标移动到链接文字上面，弹出一个已定义好的DIV层的效果。在这个层里你可以加入与此链接对应的信息，...
鼠标滑过文字弹出一段说明文字CSS实现，不通过JS实现
用css实现内容弹出，无js代码，下面代码直接拷贝了就可用， ...2. 鼠标滑过后弹出文本框：   代码如下：   http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/x
html点击文字展开图片,DIV CSS鼠标经过悬停在图片上时图片上方显示文字
原始图片显示没有文字在上方，当鼠标经过悬停时显示文字并且文字背景为半透明。可以使用纯DIV+CSS实现鼠标悬停图片上显示文字内容。纯div+css实现第一张图片没有文字内容，鼠标悬停时出现第二张图那样效果使用div ...
鼠标点击的位置弹出信息框
在鼠标的MOUSE_DOWM事件中, 根据鼠标...元素, 显示数据信息. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> ...
JavaScript

87,841

社区成员

224,616

社区内容

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

加载中

查看更多榜单
社区公告
暂无公告

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

+ 用AI写文章