使用 AngularJS 在悬停时上下滑动框

Posted 2023-03-06

【中文标题】使用 AngularJS 在悬停时上下滑动框

【英文标题】：Box slide up and down on hover with AngularJS

【发布时间】：2014-04-29 03:20:44

【问题描述】：

我试图让一个 div 在悬停时出现在图像顶部，并具有向上和向下滑动的效果。

如果我想避免使用 jQuery，任何关于从哪里开始的指针？我非常想在应用程序中只使用 AngularJS..

这是我想要完成的一个示例：

Link

【问题讨论】：

如果您想在某些数据变量更改时执行此操作，see this question。如果您想在悬停时执行此操作，CSS animations are your answer。

@Blazemonger 不幸的是，动画示例不起作用，因为我有一个图像，一个 div 必须在它上面滑动，我不能将图像用作包装器......

然后将 :hover 样式添加到相互容器元素中。

【参考方案1】：

这是一个如何使用 javascript 完成的示例

        <div style="height: 1px" onMouseover="up()" onMouseout="down()" >
        <img src="#"/>
        </div>

        <script>
        function up()
        
        div.style.height ="30px";
        
        </script>
        <script>
        function down()
        
        div.style.height ="1px";
        
        </script>