Heim >Backend-Entwicklung >PHP-Tutorial >求教一个简单的显示问题

求教一个简单的显示问题

WBOY
WBOYOriginal
2016-06-23 14:38:26790Durchsuche

现在有一系列的

  • 标签,每个
  • 标签里面有一个标签,开始这些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>

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

    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");	});

    但是当鼠标离开的时候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");	});

    这是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>


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



    你加载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>

       不明白....

    <script></script>
    <script> <br /> $(document).ready(function(){ <br /> $("#content li").mouseover(function(){ <br /> $(this).find("a").css("display","block"); <br /> }) <br /> $("#content li").mouseout(function(){ <br /> $(this).find("a").css("display","none"); <br /> }) <br /> }) </script>

    a标签显示也可以这样写

    $(this).css("display","")

    或者这样
    $(this).css("visibility","visible")

    回复 :ww_super
    我知道你说的啊   我就是那样写的啊  只是截图少截了点 
     就是  $(document).ready({...});这样的

    回复:BingoVictor
    你把10楼我发你的完整代码放本地运行下,我测试可以的!你运行如果也可以的话,对比下看看哪边有不同

    我本地确实可以的,截图:

    实在不知道你那边的情况了。。。



    你加载jquery了吗

    。。。加载了啊  其他的点击什么的效果都可以实现。。。就这个实现不了

    通过google浏览器,F12看下console,是否报错、

    搞定了  谢谢  

  • Stellungnahme:
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn