老师我想让它显示为block的时候经过两秒的时间显示为什么不管用

<!DOCTYPE html>

<html>

<head>

#xx{

display:none;

margin-top:25px;

padding-bottom:10px;

transition:all 2s ;

}

#xx:hover {

display:block;

}

</style>

</head>

<body>

<ul>

</ul>

</li>

</ul>

</body>

</html>

小鲜花 2019-09-29

源自：JS变量、作用域 3-8 选择练习

收起

2回答

好帮手慕夭夭 2019-09-29 18:23:02

你好同学，是想要一个从上往下滑动的效果对吧？老师给你写一个小例子：

<!DOCTYPE html>
<html>

<head>
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
li{
list-style: none;
}
.menu>li{
width: 80px;
height: 40px;
float: left;
/*父容器设置成参照点*/
position: relative;
}
.menu>li>a{
width: 80px;
height: 40px;
line-height: 40px;
background: pink;
text-align: center;
/*因为从上往下滑动会把一级菜单挡住，所以一级菜单设置定位，目的是为了让它层级比
下拉菜单高一点，这样就不会被挡住了*/
position: absolute;
z-index: 999;
}

#xx {
width: 80px;
text-align: center;
transition: all 2s;
position: absolute;
background: #000;
color: #fff;
opacity: 0;
/*从上往下就是一个位置变化的过程默认隐藏在屏幕上边*/
top:-100px;
}

.list:hover #xx{
opacity: 1;
/*然后显示在一级菜单的下边*/
top: 40px;
}
</style>
</head>

<body>
<ul class="menu">
<li class="list"><a href="#">1</a>
<ul id="xx">
<li>2</li>
<li>3</li>
<li>5</li>
<li>5</li>
</ul>
</li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
</body>

</html>

祝学习愉快，望采纳。

收起回答

好帮手慕夭夭 2019-09-29 14:03:19

你好同学，首先#xx:hover的意思就是鼠标移入到#xx 给它设置显示，但是xx默认已经隐藏了，所以鼠标也没有办法移入到它上面，应该给它父元素设置hover。另外呢，display是不能使用过渡的，opacity可以。但是opacity只是视觉上的隐藏，它还存在与页面，所以这个没有办法做的很完美，同学参考如下修改的，稍微理解一下就好：

祝学习愉快，望采纳。

收起回答

提问者小鲜花 #1

老师，opacity不生效得原因一般都是什么

2019-09-29 17:12:05
提问者小鲜花 #2

老师以下这个网址的导航栏鼠标hover会显示下拉子菜单想让他渐渐 http://36401134.wang.market显示出来用了老师的方法用了透明度透明度确实达到了我想要的效果，可是不生效是不是什么元素影响了他

2019-09-29 17:28:58
提问者小鲜花 #3

生效了老师，我想让他从上往下过渡该怎么办

2019-09-29 17:51:30