js如何控制一個文本框懸浮


js如何控制一個文本框,當鼠標放在上面時文本框變大,然后又不會撐開這一列,類似於懸浮的效果

6 个解决方案

#1


絕對定位唄,記得用z-index

#2


頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂

#3


focus事件時設置position: absolute

#4


先寫一個  hover懸浮的css樣式,
然后用js 控制這個class 鼠標懸浮事件

#5



<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本框演示</title>
<style>
body{
margin:0;
padding:0;
}
.wrapper{
width:400px;
margin:10px auto;
background-color: #CCCCCC;
border:1px solid #000000;
}
form{
width:400px;
margin:40px;
position: relative;
}
.demo_input{
position: absolute;
width:200px;
height:20px;
line-height: 20px;
}
.demo_input:focus{
/*IE6 IE7不支持,通過JS來兼容吧!*/
position:absolute;
width:280px;
height:30px;
line-height: 30px;
top:-5px;
left:-40px;
}
.demo_btn{
margin-left:220px;
}
</style>
</head>
<body>
<div class="wrapper">
<form action="#">
<input type="text" class="demo_input" />
<input type="button" class="demo_btn" value="按鈕"/>
</form>
</div>
</body>
</html>

#6


給每一列添加hover樣式。。列中隱藏一個變大后的列樣式元素。。。當鼠標懸浮時顯示隱藏的列。。移開隱藏掉這個列元素

注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com