码迷,mamicode.com
首页 > 其他好文 > 详细

VUE鼠标移上去提示功能类似hover

时间:2018-07-21 11:54:19      阅读:1342      评论:0      收藏:0      [点我收藏+]

标签:value   免登录   电脑   word   demo   app   nbsp   ffd   密码   

首先是CSS

*{margin:0;padding:0}
		fieldset{
			width: 230px;
			padding:30px;
			margin:100px auto;
		}
		fieldset p{
			line-height: 40px;
		}
		fieldset label{
			font-size: 12px;
			color:#bbb;
			vertical-align:3px;
		}
		fieldset input[type="button"]{
			padding-left:5px;
			padding-right:5px;
		}
		fieldset span{
			width:190px;
			padding:5px;
			position:absolute;
			left:0px;
			top:28px;
			border: 1px solid #dfb86d;
			background-color: #fffde4;
			font-size: 12px;
			line-height: 20px;
			color:#dc9632;
		}
		#demo{
			position:relative;
		}

  然后是HTML

	<fieldset>
		<form action="">
			<p>邮箱:<input type="text"></p>
			<p>密码:<input type="password" name="" id=""></p>
			<p id="demo" v-on:mouseenter="visible" @mouseleave="invisible"><input type="checkbox" id="miandenglu"><label for="miandenglu">十天内免登录</label>
				<span v-show="seen">为了您的信息安全,请不要在网吧或者公用电脑上使用此功能!</span>
			</p>
			<p>
			<input type="button" value="登 录">
			<input type="button" value="去注册">
			</p>
		</form>
	</fieldset>

  最后是VUE

		var app= new Vue({
			el:‘#demo‘,
			data:{
				seen:false
			},
			methods:{
				visible:function(){
					this.seen = true;
				},
				invisible:function(){
					this.seen = false;
				}
			}
		});

  

 

VUE鼠标移上去提示功能类似hover

标签:value   免登录   电脑   word   demo   app   nbsp   ffd   密码   

原文地址:https://www.cnblogs.com/banyuege/p/9344753.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!