div展现与收起效果(鼠标移入移出)
效果图:
移入:
移出:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标移入移出展现与收起效果</title>
<style type="text/css">
body{
margin: 0 auto;
padding: 0;
}
#pn{
background: #e8e8e8;
width: 600px;
display: block;
margin: 0 auto;
padding: 5px;
font-size: 9pt;
height: auto;
}
.slide{
margin: 0 auto;
padding: 0;
width: 600px;
border-top: 4px solid gray;
}
.btn-slide{
background: gray;
width:120px;
height: 30px;
text-align: center;
margin: 0 auto;
display: block;
color: #fff;
text-decoration: none;
padding-top: 10px;
}
</style>
<script type="text/javascript">
function showdiv(){
document.getElementById("hpn").style.display="block";
document.getElementById("strHref").innerHTML="收起-"; }
function hidediv(){
document.getElementById("hpn").style.display="none";
document.getElementById("strHref").innerHTML="更多选项+"; }
</script>
</head>
<body>
<div class="slide">
<a onmouseover="showdiv();" id="strHref" class="btn-slide">更多选项+</a>
<div id="pn">
<div id="hpn" onmouseout="hidediv()" style="display:none">
<p>价格:5000以上 4000-4999 3000-3999</p>
<p>特点:JDPhone计划‘0’元购机 放水</p>
</div>
</div>
</div> </body>
</html>
div展现与收起效果(鼠标移入移出)的更多相关文章
- js鼠标移入移出效果【原】
<HTML> <HEAD> <!-- meta 解释 : http://www.haorooms.com/post/html_meta_ds --> <met ...
- 函数传参,改变Div任意属性的值&&图片列表:鼠标移入/移出改变图片透明度
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- CSS3鼠标移入移出图片生成随机动画
今天分享使用html+css3+少量jquery实现鼠标移入移出图片生成随机动画,我们先看最终效果图(截图为静态效果,做出来可是动态的哟) 左右旋转 上下移动 缩放 由于时间关系我就不一步步解析各段代 ...
- jquery事件一 ---鼠标移入移出
比较一下几个jquery事件的区别 mouseover() 鼠标进入(进入子元素也触发) mouseout() 鼠标离开(离开子元素也触发) mouseenter() 鼠标进入(进入子元素不触发) m ...
- Vue中通过鼠标移入移出来添加或取消class样式(active)
基础知识: 先写一下vue中鼠标移入移出的基础知识,移入的触发事件是 @mouseenter,移出的触发事件是@mouseleave,知道这两个方法就简单了 基础知识的例子 <div clas ...
- js(jquery)鼠标移入移出事件时,出现闪烁、隐藏显示隐藏显示不停切换的情况
<script> $(".guanzhu").hover(function(){ $(".weixinTop").show(); },functio ...
- # li鼠标移入移出,点击,变背景色,变checkbox选中状态
移入移出背景色改变和点击背景色改变,两者是否相互覆盖? 若移出背景色恢复,影响点击事件的背景色改变,会产生效果为: 点击时,背景色改变,并且checkbox选中 鼠标移开后,checkbox仍选中,但 ...
- js鼠标移入移出事件会被子元素触发解决方法
问题:js写了一个鼠标移入移出事件,但是发现会被内部子元素不断的触发 解决方法:建立一个空的div定位到需要触发的位置,然后设置大小和触发范围一样,最后将事件写在空的div上.
- Vue 鼠标移入移出事件
Vue 中鼠标移入移出事件 @mouseover和@mouseleave 然后绑定style 现在开始代码示例 <template> <div class="pc&qu ...
随机推荐
- bootstrap 模态 modal 小例子【转】
bootstrap 模态 modal 小例子 <html> <head> <meta charset="utf-8" /> <title ...
- 在windows中停止mysql提示:'服务正在启动或停止中,请稍候片刻后再试一次'
发现mysql的windows服务异常,准备卸载并重新注册服务,输入: mysqld --remove MySQL 提示: 发现卸载不掉这个服务,于是找到MySQL服务的pid sc queryex ...
- 解决idea中找不到程序包和找不到符号的问题
问题如图: 解决方法: 将三处编码都设置成UTF-8,亲测有效 本人也是拜读大佬博客后解决的: http://www.cnblogs.com/wzhanke/p/4747966.html
- 20155237 2016-2017-2 《Java程序设计》第8周学习总结
20155237 2016-2017-2 <Java程序设计>第8周学习总结 教材学习内容总结 NIO与NIO2 认识NIO Channel: 衔接数据节点(与IO中的流对比) isOpe ...
- luogu P2325 [SCOI2005]王室联邦
传送门 做法是dfs整棵树,当访问一个点\(x\)时,先访问儿子,若某个时刻子树大小\(\ge b\)时,就把那些点放在一个省里,省会记为\(x\),访问完儿子再把\(x\)加入栈.最后栈中剩余的没加 ...
- Ubuntu16.04搭建QingdaoU(docker一键式部署)
QDUOJ已经开源到2.0版本了,下面的教程不再适用,仅做纪念吧! 这几天装什么Linux.开源OJ上瘾了...竟然没去刷题...嗯,做好记录就写题啦! 先上原始网站的图: 风格不错,很符合我的口味. ...
- 第16月第24天 find iconv sublime utf-8
1. find . -type f -exec echo {} \; find src -type f -exec sh -c "iconv -f GB18030 -t UTF8 {} &g ...
- Maven打包编译找不到com.sun.crypto.provider.SunJCE类
Maven配置 <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>mav ...
- 字符加密 Valentino 函数 (伪分治)
题面 \(solution:\) 这一题重点不在字符串加密,而是我们最后的求值:\(K^{s}\mod M\)(\(s\leq36^{100000}\)) 而我们发现它的指数十分巨大,但众所周知的指数 ...
- Biorhythms HDU - 1370 (中国剩余定理)
孙子定理: 当前存在三个式子,t%3=2,t%5=3,t%7=2.然后让你求出t的值的一个通解. 具体过程:选取3和5的一个公倍数t1能够使得这个公倍数t1%7==1,然后选取3和7的一个公倍数t2使 ...