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

首先是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

	

邮箱:

密码:

为了您的信息安全,请不要在网吧或者公用电脑上使用此功能!

  最后是VUE

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

  

 

转载于:https://www.cnblogs.com/banyuege/p/9344753.html

你可能感兴趣的:(VUE鼠标移上去提示功能类似hover)