在angularjs中使用鼠标将鼠标悬停并离开切换项目
在angularjs中使用鼠标将鼠标悬停并离开切换项目
提问于 2014-03-20 20:12:36
HTML：
<ul ng-repeat="task in tasks">
<li ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()">{{task.name}}</li>
<span ng-show="hoverEdit"><a>Edit</a></span>
</ul>JS：
$scope.hoverIn = function(){
$scope.hoverEdit = true;
};
$scope.hoverOut = function(){
$scope.hoverEdit = false;
};代码是可笑的，因为我认为它太多了。我认为它可以简化。无论如何，一旦项目悬停，结果就会切换所有项目。我有jQuery背景，所以我不知道如何在ng-repeat中让单个项目工作。
回答 3
Stack Overflow用户
发布于 2014-11-18 08:44:43
我只需要在ng-mouseover和ng-mouseleave中进行赋值；不需要麻烦js文件:)
<ul ng-repeat="task in tasks">
<li ng-mouseover="hoverEdit = true" ng-mouseleave="hoverEdit = false">{{task.name}}</li>
<span ng-show="hoverEdit"><a>Edit</a></span>
</ul>Stack Overflow用户
发布于 2015-10-22 03:49:27
这里有点晚了，但我发现这是一个常见的问题，值得使用自定义指令来处理。这看起来可能是这样的：
.directive('toggleOnHover', function(){
return {
restrict: 'A',
link: link
};
function link(scope, elem, attrs){
elem.on('mouseenter', applyToggleExp);
elem.on('mouseleave', applyToggleExp);
function applyToggleExp(){
scope.$apply(attrs.toggleOnHover);
}
}
});你可以这样使用它：
<li toggle-on-hover="editableProp = !editableProp">edit</li> Stack Overflow用户
发布于 2016-06-01 20:36:50
以下是仅包含CSS的示例。在示例中，我使用SASS和SLIM。
https://codepen.io/Darex1991/pen/zBxPxe
超薄：
a.btn.btn--joined-state
span joined
span leave萨斯：
=animate($property...)
@each $vendor in ('-webkit-', '')
#{$vendor}transition-property: $property
#{$vendor}transition-duration: .3s
#{$vendor}transition-timing-function: ease-in
=visible
+animate(opacity, max-height, visibility)
max-height: 150px
opacity: 1
visibility: visible
=invisible
+animate(opacity, max-height, visibility)
max-height: 0
opacity: 0
visibility: hidden
=transform($var)
@each $vendor in ('-webkit-', '-ms-', '')
#{$vendor}transform: $var
.btn
border: 1px solid blue
&--joined-state
position: relative
span
+animate(opacity)
span:last-of-type
+invisible
+transform(translateX(-50%))
position: absolute
left: 50%
&:hover
span:first-of-type
+invisible
span:last-of-type
+visible
border-color: blue页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22532656
复制相关文章
相似问题
腾讯云开发者
