Javascript 为每个列表项设置鼠标悬停/鼠标悬停动画

我有一个带有一组按钮的项目列表，当鼠标悬停在每个

li

上时，我希望显示这些按钮，但从现在起，每当我悬停在任何

li

上时，都会显示所有

项目btn grp

。我只希望悬停在

li

上显示

项btn grp

。欢迎任何帮助，提前谢谢。我正在使用ngAnimate制作动画

.item-btn-grp {
    display:inline-block;
    float: right;
    height: 40px;
    border-left: 1px solid #a1a0a0;
    -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s;
    -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s;
    -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s;
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s;
    right: 0;
}

.item-btn-grp.ng-hide {
  right: -50px;
  opacity:0;
  padding:0 10px;
}


<div id="tasks-list">
    <li class="task-item"  ng-mouseover="myValue = true" ng-mouseleave="myValue = false">
        Do this And then that
        <div class='item-btn-grp' ng-show="myValue" >
            <button class="item-btn-ok"><span class="glyphicon glyphicon-ok"></span></button>
            <button class="item-btn-remove"><span class="glyphicon glyphicon-remove"></span></button>
        </div>
    </li>
    <li class="task-item"  ng-mouseover="myValue = true" ng-mouseleave="myValue = false">
        Do this And then that
        <div class='item-btn-grp' ng-show="myValue" >
            <button class="item-btn-ok"><span class="glyphicon glyphicon-ok"></span></button>
            <button class="item-btn-remove"><span class="glyphicon glyphicon-remove"></span></button>
        </div>
    </li>
</div>

。项目btn grp{
显示：内联块；
浮动：对；
高度：40px；
左边框：1px实心#a1a0a0；
-webkit过渡：全立方贝塞尔（0.250,0.460,0.450,0.940）1s；
-moz变换：全立方贝塞尔（0.250,0.460,0.450,0.940）1s；
-o型过渡：全立方贝塞尔（0.250,0.460,0.450,0.940）1s；
过渡：全立方贝塞尔（0.250,0.460,0.450,0.940）1s；
右：0；
}
.项目-btn-grp.ng-hide{
右：-50px；
不透明度：0；
填充：0 10px；
}

做这个然后做那个


做这个然后做那个

请浏览此链接：

---

希望对您有所帮助。

这可以通过css直接实现，请使用下面的css

.task-item:hover .item-btn-grp {
    display:inline-block;
    height: 40px;
    border-left: 1px solid #a1a0a0;
    -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s;
    -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s;
    -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s;
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s;
    right: 0;
    opacity:1;
}

.item-btn-grp{
  right: -50px;
  opacity:0;
  padding:0 10px;
}

---

请参阅此

您可以按项目使用值

假设您使用的是

ng repeat

<li class="task-item" ng-repeat="item in taskItems" ng-mouseover="item.myValue = true" ng-mouseleave="item.myValue = false">
    <div class='item-btn-grp' ng-show="item.myValue" >
        <!-- buttons -->
    </div>
</li>

你可以发布工作小提琴吗？但这意味着我必须在每个项目中添加一个

myValue

，以便能够在每个

li

上显示按钮。：/我不知道项目的结构，但如果它们有id，你可以使用地图。ng mouseover=“map[item.id]=true”，ng mouseleave=“map[item.id]=false”，ng show=“map[item.id]==true”，然后在控制器中初始化它$scope.map={}；