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
中让单个项目工作。
发布于 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>
发布于 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>
发布于 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
https://stackoverflow.com/questions/22532656
复制相似问题