AngularJS实现按钮提示与点击变色效果

前端之家收集整理的这篇文章主要介绍了AngularJS实现按钮提示与点击变色效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文用angularJS简单实现了一个小的按钮提示,按钮点击后会变色,注意html文件中需要引入jquery.js和angular.js

运行截图:

当点击按钮的时候 按钮的样式改变:

css代码

HTML代码

提示" style="margin-top:60px;">

js代码

})
.directive("bucButton",function(){
return {
restrict : 'E',replace : true,scope : {
myTitle : "@",id : "@",tipTitle : "@"
},template : "",link : function(scope,elem,attrs) { scope.mouSEOver = function(){ $(".tip").show(); }

scope.mouSEOut = function(){
$(".tip").hide();
}

scope.clicked = function(){
elem.toggleClass("bucSelectedHover");
$(".tip").hide();
}
}
}
})

鼠标移入按钮,tip提示出现,鼠标移出的时候,tip消失。tip的小三角我是利用了css3的属性来实现的。

总结

以上就是这篇文章的全部内容,希望对大家学习AngularJS能有所帮助。如果有疑问大家可以留言交流。

原文链接:https://www.f2er.com/js/46012.html

猜你在找的JavaScript相关文章