blocks|key|138813|text|我只需要在ng-mouseover和ng-mouseleave中进行赋值；不需要麻烦js文件:)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|138814|<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>
</ul>|code-block|syntax|javascript|138815|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I would simply make the assignment happen in the ng-mouseover and ng-mouseleave; no need to bother js file :)

<pre><code>&lt;ul ng-repeat="task in tasks"&gt;
 &lt;li ng-mouseover="hoverEdit = true" ng-mouseleave="hoverEdit = false"&gt;{{task.name}}&lt;/li&gt;
 &lt;span ng-show="hoverEdit"&gt;&lt;a&gt;Edit&lt;/a&gt;&lt;/span&gt;
&lt;/ul&gt;
</code></pre>

blocks|key|4645472|text|这里有点晚了，但我发现这是一个常见的问题，值得使用自定义指令来处理。这看起来可能是这样的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4645473|++.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);
++++++}
++++}

++});|code-block|syntax|javascript|4645474|你可以这样使用它：|4645475|<li+toggle-on-hover="editableProp+=+!editableProp">edit</li>+|4645476|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

A little late here, but I've found this to be a common problem worth a custom directive to handle. Here's how that might look:

<pre><code> .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);
 }
 }

 });
</code></pre>

You can use it like this:

<pre><code>&lt;li toggle-on-hover="editableProp = !editableProp"&gt;edit&lt;/li&gt; 
</code></pre>

blocks|key|4645524|text|以下是仅包含CSS的示例。在示例中，我使用SASS和SLIM。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4645525|https://codepen.io/Darex1991/pen/zBxPxe|offset|length|4645526|超薄：|4645527|a.btn.btn--joined-state
++span+joined
++span+leave|code-block|syntax|javascript|4645528|萨斯：|4645529|=animate($property...)
++@each+$vendor+in+('-webkit-',+'')
++++#{$vendor}transition-property:+$property
++++#{$vendor}transition-duration:+.3s
++++#{$vendor}transition-timing-function:+ease-in

=visible
++%2Banimate(opacity,+max-height,+visibility)
++max-height:+150px
++opacity:+1
++visibility:+visible

=invisible
++%2Banimate(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
++++++%2Banimate(opacity)

++++span:last-of-type
++++++%2Binvisible
++++++%2Btransform(translateX(-50%25))
++++++position:+absolute
++++++left:+50%25

++++&:hover
++++++span:first-of-type
++++++++%2Binvisible
++++++span:last-of-type
++++++++%2Bvisible
++++++++border-color:+blue|4645530|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|13|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@]|9|@$D|Z|E|10|1|11]]|A|$]]|$1|F|3|G|5|6|7|12|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|13|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|14|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|15|8|@]|9|@]|A|$K|L]]|$1|Q|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|C]]]]

Here is example with only CSS for that.
In example I'm using SASS and SLIM.

<a href="https://codepen.io/Darex1991/pen/zBxPxe" rel="nofollow">https://codepen.io/Darex1991/pen/zBxPxe</a>

Slim:

<pre><code>a.btn.btn--joined-state
 span joined
 span leave
</code></pre>

SASS:

<pre><code>=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

 &amp;--joined-state
 position: relative
 span
 +animate(opacity)

 span:last-of-type
 +invisible
 +transform(translateX(-50%))
 position: absolute
 left: 50%

 &amp;:hover
 span:first-of-type
 +invisible
 span:last-of-type
 +visible
 border-color: blue
</code></pre>

HTML: 

<pre><code>&lt;ul ng-repeat="task in tasks"&gt;
 &lt;li ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()"&gt;{{task.name}}&lt;/li&gt;
 &lt;span ng-show="hoverEdit"&gt;&lt;a&gt;Edit&lt;/a&gt;&lt;/span&gt;
&lt;/ul&gt;
</code></pre>

JS:

<pre><code>$scope.hoverIn = function(){
 $scope.hoverEdit = true;
};

$scope.hoverOut = function(){
 $scope.hoverEdit = false;
};
</code></pre>

The code is ridiculous because I think it's too much. I think it can be simplified. Anyway the result toggle all the item once it's hovered. I've jQuery background, so I have no idea how to make single item work in <code>ng-repeat</code>.

ng-mouseover and leave to toggle item using mouse in angularjs

jQuery

HTML：<ul ng-repeat="task in tasks"> <li ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()">{{task.name}}</li> <a>Edit</a></span...

问在angularjs中使用鼠标将鼠标悬停并离开切换项目
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在angularjs中使用鼠标将鼠标悬停并离开切换项目EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在angularjs中使用鼠标将鼠标悬停并离开切换项目
EN