#nav li:hover ul,#nav li.over ul{display:block;},求讲解,
来源:学生作业帮 编辑:大师作文网作业帮 分类:综合作业 时间:2024/09/21 00:52:01
#nav li:hover ul,#nav li.over ul{display:block;},求讲解,
请问这里.over是类选择符吗,貌似没看到用class=over的标签啊
请问这里.over是类选择符吗,貌似没看到用class=over的标签啊
这个.over类应该是js动态加上的,你可以用调试工具检测一下.
再问: 能不能帮我讲解一下 #nav li.over ul 代表什么
再答: <ul id="nav">
<li class="over">
<ul>
<li>我是第一个</li>
</ul>
</li>
<li>
<ul>
<li>我是第二个</li>
</ul>
</li>
</ul>空格的写法表示子元素,所以#nav li.over ul:表示#nav下的 class为over的li 下的ul那么生效的是“我是第一个”所处的UL有可能你查看源码找不到class="over",因为over是js动态添加的
再问: 那如果找不到class="over",#nav li.over ul表示的还是 表示#nav下的 class为over的li 下的ul,只是那个ul看不到吗?
再答: 是的。给你个例子。<script type="text/javascript" src="jquery.js"></script><!--这里引入jQuery库-->
<script type="text/javascript">
$(function(){
$("#nav > li").hover(function(){
$(this).addClass("over");
},function(){
$(this).removeClass("over");
})
})
</script>
<style type="text/css">
*{margin:0;padding:0;}
ul,li{list-style:none;}
#nav{width:800px;height:30px;background:#CCC;}
#nav li{float:left;margin:0 10px;line-height:30px;position:relative;}
#nav li ul{display:none;position:absolute;left:0;top:30px;width:200px;background:#096;}
#nav li:hover ul,#nav li.over ul{display:block;}
</style>
<ul id="nav">
<li><a href="#">第一个</a>
<ul>
<li>第一个子UL</li>
<li>第一个子UL</li>
<li>第一个子UL</li>
</ul>
</li>
<li><a href="#">第二个</a>
<ul>
<li>第二个子UL</li>
</ul>
</li>
</ul>
再问: 第一次提问有人愿意回答得这么详细,先感谢您 这三个部分(一个文本代码,两张图)是不是指第二图这个地方,只写成第一部分代码的样子(即)就己经可以达到的作用,因为它用js动态加上了 如果想做导航的第三级,第三级碰到才出现的效果代码则要怎么写?
再答: 继续做就更复杂了,就不写例子了。你参考上面方法研究吧。或者去看看别人的多级菜单怎么写的
再问: 我只找到第二级的代码 而且不懂JS所以一直没研究出来,其实前面问了那么多也是为解决这个问题,还要再另外写JS吗?能不能最后再帮一把,感激不尽
再问: 能不能帮我讲解一下 #nav li.over ul 代表什么
再答: <ul id="nav">
<li class="over">
<ul>
<li>我是第一个</li>
</ul>
</li>
<li>
<ul>
<li>我是第二个</li>
</ul>
</li>
</ul>空格的写法表示子元素,所以#nav li.over ul:表示#nav下的 class为over的li 下的ul那么生效的是“我是第一个”所处的UL有可能你查看源码找不到class="over",因为over是js动态添加的
再问: 那如果找不到class="over",#nav li.over ul表示的还是 表示#nav下的 class为over的li 下的ul,只是那个ul看不到吗?
再答: 是的。给你个例子。<script type="text/javascript" src="jquery.js"></script><!--这里引入jQuery库-->
<script type="text/javascript">
$(function(){
$("#nav > li").hover(function(){
$(this).addClass("over");
},function(){
$(this).removeClass("over");
})
})
</script>
<style type="text/css">
*{margin:0;padding:0;}
ul,li{list-style:none;}
#nav{width:800px;height:30px;background:#CCC;}
#nav li{float:left;margin:0 10px;line-height:30px;position:relative;}
#nav li ul{display:none;position:absolute;left:0;top:30px;width:200px;background:#096;}
#nav li:hover ul,#nav li.over ul{display:block;}
</style>
<ul id="nav">
<li><a href="#">第一个</a>
<ul>
<li>第一个子UL</li>
<li>第一个子UL</li>
<li>第一个子UL</li>
</ul>
</li>
<li><a href="#">第二个</a>
<ul>
<li>第二个子UL</li>
</ul>
</li>
</ul>
再问: 第一次提问有人愿意回答得这么详细,先感谢您 这三个部分(一个文本代码,两张图)是不是指第二图这个地方,只写成第一部分代码的样子(即)就己经可以达到的作用,因为它用js动态加上了 如果想做导航的第三级,第三级碰到才出现的效果代码则要怎么写?
再答: 继续做就更复杂了,就不写例子了。你参考上面方法研究吧。或者去看看别人的多级菜单怎么写的
再问: 我只找到第二级的代码 而且不懂JS所以一直没研究出来,其实前面问了那么多也是为解决这个问题,还要再另外写JS吗?能不能最后再帮一把,感激不尽
#nav li:hover ul,#nav li.over ul{display:block;},求讲解,
/* non-IE browsers see this */ #nav ul li>ul, #nav ul ul li>
li:hover ul,.over ul{display:block;}后面那个.起什么作用?
div+css中A链接转换块元素?#div nav ul li 为什么要转成display block?为什么要转成块元
.clear{clear:both;height:0; overflow:hidden;} ul,li{display:
ul li 在dw
.nav_main ul li a:hover span这是什么写法,这是什么写法啊,
div+css布局ul li
$(this).find('ul:first li'); jquery用法 ul:first li 是获取第一个ul
div:after,ul:after,dl:after{content:".";display:block;clear:
body,ul,li { margin:0; padding:0; }
html中的li和ul是什么标签?