Maison > développement back-end > tutoriel php > 求教一个简单的显示问题

求教一个简单的显示问题

WBOY
Libérer: 2016-06-23 14:38:26
original
764 Les gens l'ont consulté

现在有一系列的

  • 标签,每个
  • 标签里面有一个标签,开始这些a标签都是隐藏状态,想实现当鼠标放在某个li上面是, 这里面的a标签就显示出来  求解!!!

    回复讨论(解决方案)

    $(this).next().show()

    结构呢?如何隐藏的?dispaly:none?还是其他?

    用css就可以啦

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><style>	.myli:hover a{		display:block;	}	.a_start{		display:none;	}</style></head><body><ul>	<li class='myli'><a class="a_start">a</a></li>	<li class='myli'><a class="a_start">b</a></li>	<li class='myli'><a class="a_start">c</a></li>	<li class='myli'><a class="a_start">d</a></li>	<li class='myli'><a class="a_start">e</a></li></ul></body></html>
    Copier après la connexion

    用jquery方便点

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"type="text/javascript"></script><script>$(document).ready(function(){	$("#content li").mouseover(function(){		$(this).find("a").css("display","block");	})	$("#content li").mouseout(function(){		$(this).find("a").css("display","none");	})})</script><div id="content">	<li>li<a href="" style="display:none">test1</a></li>	<li>li<a href="" style="display:none">test2</a></li>	<li>li<a href="" style="display:none">test3</a></li></div>
    Copier après la connexion

    li的hover,但在ie6下会有些问题
    有补丁的方向

    回复ww_super:
    我就是这样写的啊:

    	$('#msglist li').mouseover(function(){		$(this).children("a").css("display","block");	});			$('#msglist li').mouseout(function(){		$(this).children('a').css("display","none");	});
    Copier après la connexion
    Copier après la connexion

    但是当鼠标离开的时候a没有显示出来 求解

    li的hover,但在ie6下会有些问题
    有补丁的方向

    虽然我不是做前台的,但是ie6 - - ~

    这是js代码

    	$('#msglist li').mouseover(function(){		$(this).children("a").css("display","block");	});			$('#msglist li').mouseout(function(){		$(this).children('a').css("display","none");	});
    Copier après la connexion
    Copier après la connexion

    这是html代码
    <ul id='msglist'><volist name="res" id='vo2'><li class="clearfix" id="{$vo2.WithUid}" style="border:1px solid #000"><a class="delCurSx" style="display:none">X</a><div class="title"><h3> {$vo2.ToName}</h3><p>{$vo2.AddTime}</p></div><div class="detail"><div class="sxDetailCon">{$vo2.Msg}</div>              </div></li></volist></ul>
    Copier après la connexion


    为什么实现不出来效果呢?



    你加载jquery了吗

    像我上面给你的例子一样,把你的js代码放到
    $(document).ready(function(){ ... })这个里面来!

    这个是让你页面运行完了再执行js,你一开始就执行js,页面中还没有所写那些元素呢,完整代码如下

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"type="text/javascript"></script><script>$(document).ready(function(){	$('#msglist li').mouseover(function(){	    $(this).children("a").css("display","block");	});	     	$('#msglist li').mouseout(function(){	    $(this).children('a').css("display","none");	}); })</script><ul id='msglist'>	<volist name="res" id='vo2'>		<li class="clearfix" id="{$vo2.WithUid}" style="border:1px solid #000">			<a class="delCurSx" style="display:none">X</a>			<div class="title">				<h3>{$vo2.ToName}</h3>				<p>{$vo2.AddTime}</p>			</div>			<div class="detail">				<div class="sxDetailCon">{$vo2.Msg}</div>              			</div>		</li>	</volist></ul>
    Copier après la connexion

    不明白....


  • Tutoriels populaires
    Plus>
    Derniers téléchargements
    Plus>
    effets Web
    Code source du site Web
    Matériel du site Web
    Modèle frontal