在悬停时添加翻转

Adding flip on hover

本文关键字:翻转 添加 悬停      更新时间:2023-09-26

我有两个javascript函数翻转后,另一个翻转前。当元素被点击时,flipBack和flipFront工作。我希望这工作悬停也

我试过了,但是行不通

$(self.front).hover(
    function () {
        showBack();
    },
    $(self.back).mouseout(function () {
        showFront();
    });
);

这里是活塞链接http://plnkr.co/edit/qSgvgVat3cXEjLIpD8x6?p=preview

不行,不行。函数hover需要两个函数作为参数。第一个函数将在mouseenter事件发生时调用,第二个函数将在元素上发生mouseleave事件时调用。

$(self.front).hover(
    function () {
        showBack();
    },
    function () {
        showFront();
    });

也可以使用直接函数引用

$(self.front).hover(showBack, showFront);

更新:

当你使用AngularJS时,使用ng-mouseenterng-mouseleave

视图:

<li ng-mouseenter="showBack()" ng-mouseleave="showFront()">

控制器:

$scope.showBack = function() {
    // Code here
};
$scope.showFront = function() {
    // Code here
};

更新2

在控制器

中添加以下内容
self.front.on("mouseenter", showBack);
self.front.on("mouseleave", showFront);
self.back.on("mouseenter", showBack);
self.back.on("mouseleave", showFront);

更新恰好