js css 鼠标移入某个区域滑出一个框的效果怎么做？
比如it之家的首页的右上角的“软媒应用”那个按钮，移动上去以后会下拉出一个框，是下拉出一个框，不是鼠标移入就出现一个框，前一个的效果是有过渡的平滑出现的，后一个是没有过渡的。这样的效果是怎么做的？
不知道你是要的那种效果：类似于这种的吗？下面两种仅供参考。
<html>
<head>
<meta charset="utf-8">
<title>鼠标移入显示文本</title>
<link href="my.css" rel="stylesheet" type="text/css">
<style>
#body1{width:960px; height:auto; margin:20px auto 0px auto}
#body1 ul{}
#body1 li{float:left; width:239px; text-align:center; height:318px; position:relative}
#body1 img{ position:absolute; top:0px; left:5px}
#body1 span{display:block; position:absolute; background:#666; height:70px;bottom:0px; left:5px; width:220px;color:#fff; opacity:0.7}
</style>
<script src="jquery-1.3.2.min.js"></script>
<script>
$(function(){
$('#body1 li').find('span').hide(); //隐藏全部
$('#body1 li').hover(function(){
$(this).find('span').stop(true,true).slideDown();
},function(){
$(this).find('span').stop(true,true).slideUp();
});
});
</script>
</head>
<body>
<div id="body1">
<ul>
<li>
<a href="#">
<img src="img/3.jpg" />
<span>说明内容说明内容说明内容说明内容</span>
</a>
</li>
<li>
<a href="#">
<img src="img/4.jpg" />
<span>说明2内容说明内容说明内容说明内容</span>
</a>
</li>
<li>
<a href="#">
<img src="img/5.jpg" />
<span>说明3内容说明内容说明内容说明内容</span>
</a>
</li>
<li>
<a href="#">
<img src="img/6.jpg" />
<span>说明4内容说明内容说明内容说明内容</span>
</a>
</li>
</ul>
</div>
</body>
</html>
第二种：还有一种是用的css3实现的，
实现原理：刚开始框就存在了，只不过透明度为全透明，鼠标移入后透明度不透明就显示出来了，框稍微动画一些的话就用到css3的旋转之类的了。如下图
<html>
<head>
<meta charset="utf-8">
<title>css3练习</title>
<link href="my-1.css" rel="stylesheet" type="text/css">
<style>
#bt{width:100%; height:50px; font-size:20px; background:#06F; color:#fff; text-align:center; line-height:50px; margin-bottom:10px}
figure{position:relative; width:33.33%; height:270px; float:left; overflow:hidden}
figure img{width:100%; opacity:0.9;transition: all 0.35s;}
figcaption{position:absolute; top:10px; left:10px; color:#fff; font-family:"微软雅黑"}
@media screen and (max-width:600px){
figure{width:100%}
}
@media screen and (max-width:1000px) and (min-width:601px){
figure{width:50%}
}
@media screen and (min-width:1001px){
figure{width:33.33%}
}
.d2{background:#000}
.d2 figcaption{width:100%; height:100%;}
.d2 figcaption h2{margin-top:10%;margin-left:15%}
.d2 figcaption p{margin-top:5%;margin-left:15% ;transform:translate(0px,50px); opacity:0}
.d2 figcaption div{width:80%; height:60%; border:5px solid white; position:absolute; top:10%; left:10%; transform:translate(0px,-210px) rotate(0deg)}
.d2:hover figcaption div{ transform:translate(0px,0px) rotate(180deg);}
.d2:hover img{ opacity:0.7}
.d2:hover figcaption p{margin-top:5%;margin-left:15%; font-size:17px; font-weight:bold; transform:translate(0px,0px);opacity:1}
/*----------------------------end-------------------------------------------*/
</style>
</head>
<body>
<div id="bt">CSS3.0的样式练习</div>
<figure class="d2">
<img src="img/48.jpg"/>
<figcaption>
<h2>旋转动画</h2>
<p>飞来飞去，飞来飞舞</p>
<div></div>
</figcaption>
</figure>
</body>
</html>
1、输入代码，其中button是鼠标要滑动的地方，滑过button时，class为content的内容就要显示出来，鼠标滑出去的时候，这块内容就需要重新隐藏起来。
2、把黑色内容的部分初始状态写成隐藏。只需要在class为content里写上display:none,即可。
3、来看下代码和浏览器中的效果。可以看到黑色内容部分已经不见了。
4、把onmouseover和onmouseout两个事件作用在button上面，再写overShow()和overHide()两个 函数。可以看到在函数中通过改content的display属性来实现显示隐藏的效果。
5、在浏览器中就可以看到效果了。
看看这个是不是你要的效果？
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<style>
*{line-height:25px;color:#FFFFFF;}
#headerDiv{margin:0px;padding:0px;}
#headerDiv li{list-style:none;float:left; width:120px;}
#headerDiv li a{padding:4px;float:left; background:#136fb8;}
#headerDiv li dl{width:100%;float:left;background:#136fb8;display:none;}
#headerDiv li dl, #headerDiv li dl dd{margin:0px;padding:0px;}
.clearCls{clear:both;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#headerDiv').find('li').hover(function(){
$(this).find('dl').slideDown();
}, function(){
$(this).find('dl').slideUp();
});
});
window.onload=function(){
}
</script>
</head>
<body>
<ul id="headerDiv">
<li>
<a href="#">信息分类</a>
<dl>
<dd><a href="#">电脑网络</a></dd>
<dd><a href="#">网络游戏</a></dd>
<dd><a href="#">游戏产品</a></dd>
</dl>
</li>
</ul>
</body>
</html>本回答被提问者采纳
js css 鼠标移入某个区域滑出一个框的效果怎么做?
1、输入代码，其中button是鼠标要滑动的地方，滑过button时，class为content的内容就要显示出来，鼠标滑出去的时候，这块内容就需要重新隐藏起来。2、把黑色内容的部分初始状态写成隐藏。只需要在class为content里写上display:none,即可。3、来看下代码和浏览器中的效果。可以看到黑色内容部分已经不见了。4、...
js css 鼠标移入某个区域滑出一个框的效果怎么做?
实现原理：刚开始框就存在了，只不过透明度为全透明，鼠标移入后透明度不透明就显示出来了，框稍微动画一些的话就用到css3的旋转之类的了。如下图 <!doctype html>css3练习#bt{width:100%; height:50px; font-size:20px; background:#06F; color:#fff; text-align:center; line-height:50px; ...
divcssjs实现弹出框?
如何用JS和CSS3制作炫酷的弹窗效果1、在body里面布局，把对话框的大致结构写出来。写css样式，让对话框在网页上体现出来。得到如下图样式，结构完成。最后就是写js样式，让我们的对话框达到一定的效果。点击超链接弹出对话框。2、就是用js实现的。当然，还有很多种方法。比如新建一个弹窗层，加入遮罩等...
像这样的效果如何实现,鼠标悬停一处,右侧弹出一个层
第一种用JS 鼠标hover时候触发 第二种用CSS 的hover伪类
CSS实现一个效果,当鼠标移上去时,下方出现一张图
1、首先在netbenas建立一个html文件。2、引入css文件。3、html文件增加一个显示图片层。4、在1.css文件中增加代码。5、看看浏览器图片层效果。6、层里面加一个图片。7、在win10下调用自带的3d画图软件。8、在win10下画图3d软件新建一个画布,画一个画布是184x149尺寸。9、win10自带的3d软件画一个...
css :hover 问题当鼠标放到某个块的时候会弹出一个框怎么能把鼠标移走...
纯a:hover想出来的东西鼠标out时不收回去，此题无解。
CSS DIV 怎么做出来鼠标移动上就显示其内容?
1、新建html文档，在body标签中添加一个div标签，然后在div标签中添加p标签，为p标签添加内容：2、为了方便演示，给div标签设置宽高和背景颜色，然后给p标签设置“display”属性，属性值为“none”，这样p标签中的文字默认情况下不会显示：3、给div设置hover伪类，当鼠标移动到div区域时，设置p标签的样式...
HTML中鼠标悬浮时的下拉菜单用CSS怎么做
这个你需要用到伪类 :hover :hover 伪类在鼠标移到元素上时向此元素添加特殊的样式。例子1 a:hover {color: #FF00FF}延时文本当鼠标移动到a标签上的时候，改变a标签的文字颜色深入用法，当移动到某标签的时候改变其它标签的样式：例子： 菜单 弹出菜单1 ...
html css 鼠标滑到一个图片\/div上会在一边显示另一个div。求解!!!
1, 2 外面包一层 div (称为3)，并且 2 预设 display 设定为 none 隐藏 当鼠标滑过 3 ，就把 3:hover > 2 的 display 打开(block) 即可 不懂可以私信问我详细
JQuery 鼠标移到一个层上显示另一个层问题
第一个问题解决思路：每个一级菜单设置hover事件没有问题，但是你的代码中显示的二级菜单却成为了全局所有的了，所以需要修改为当前一级菜单下面的$(".subCategory")元素，即 $(一级菜单).find(".subCategory")--->>> 这样才会显示为当前一级菜单下的二级菜单。第二个问题解决思路：由于hover事件中...
