:渲染角度视图时应用的悬停状态

我遇到了一个有趣的错误。在 iOS Safari 上的 Angular 1.2.13 应用程序中，:hover伪类在渲染回视图时处于活动状态。我也在使用ui路由器。

下面是标记：

<ul class='nav nav-pills nav-stacked margin-2'>
    <li>
      <a ui-sref='mobileAboutEdit'>
          About
          <i class='fa fa-chevron-right pull-right'></i>
      <enter code here/a>
    </li>
    <li>
      <a ui-sref='mobileNotificationsEdit'>
          Notifications
          <i class='fa fa-chevron-right pull-right'></i>
      </a>
    </li>
    <li>
      <a ui-sref='mobileAccountEdit'>
          Account
          <i class='fa fa-chevron-right pull-right'></i>
      </a>
    </li>
    <li>
      <a ui-sref='mobileAdvancedEdit'>
          Advanced
          <i class='fa fa-chevron-right pull-right'></i>
      </a>
    </li>

控制器只是为了咯咯笑：

.controller('UserEditCtrl', function($scope, $state, $stateParams, $rootScope, metatags, UserService, UserAccountService, UnlinkAccountService, MetaTagsUpdateService, PasswordService, CookieService, SocketUtilsService, MessageService, ImageService, LogService, ImageUpdateService) {
    // Update metatags...
    MetaTagsUpdateService.update($state, $scope, 'user', {'<<username>>': $rootScope.loggedInUser});
    $scope.fileChanged = function(e) {
        var files = e.target.files;
        var fileReader = new FileReader();
        fileReader.readAsDataURL(files[0]);
        fileReader.onload = function() {
            $scope.imgSrc = this.result;
            $scope.$apply();
        };
    };
    $scope.clear = function() {
        $scope.imageCropStep = 1;
    };
    $scope.$watch('resultBlob', function(newVal) {
        if (newVal) {
            ImageService.save({image: $scope.result, object: 'user', id: $scope.user._id}, function(data) {
                LogService.info('Filenames saved:' + JSON.stringify(data));
                ImageUpdateService.updateUi('user');
                $state.go('user', {username: $rootScope.loggedInUser});
            }, function() {
                MessageService.addError('Error saving image.');
            });
        }
    });
    UserService.get({username: $rootScope.loggedInUser}, function(data) {
        $scope.user = data;
        SocketUtilsService.notifyUserMessages();
        $rootScope.$broadcast('user-account-details', {user: $scope.user});
    });
    $scope.save = function() {
        UserService.save($scope.user, function(data) {
            $state.go('user', {username: data.username});
            $scope.$emit('message', {level: 'info', message: 'Your profile has been updated.'});
        }, function(err) {
            MessageService.translateErrorMessage(err);
        });
    };
    $scope.saveAccountDetails = function(){
        var _user = $scope.user;
        UserAccountService.save({username: _user.username, email: _user.email, emailPublic: _user.emailPublic}, function(data){
            CookieService.setUsername(data.username, true);
            $state.go('user', {username: data.username});
            $scope.$emit('message', {level: 'info', message: 'Your account has been updated.'});
        }, function(err){
            MessageService.translateErrorMessage(err);
        });
    };
    $scope.addWebsite = function() {
        $scope.user.profile.contacts.push({name: 'url', value: ''});
    };
    $scope.removeWebsite = function(index) {
        $scope.user.profile.contacts.splice(index, 1);
    };
})
// Controllers in Advanced
.controller('PasswordCtrl', function ($scope, $rootScope, $state, PasswordService, CookieService, MessageService) {
    $scope.passwordChanged = false;
    $scope.changePassword = function() {
        PasswordService.change($scope.newPassword, CookieService.getAuth(), function(err) {
            if (!err) {
                $state.go('user', {username: $rootScope.loggedInUser});
                $scope.$emit('message', {level: 'info', message: 'Password has been changed.'});
            } else {
                MessageService.translateErrorMessage(err);
            }
        });
    };
    $scope.isNewPasswordValid = function() {
        return !$scope.newPassword || $scope.newPassword.length < 6 || $scope.newPassword !== $scope.newPassword2;
    };
})
.controller('UnregisterCtrl', function ($scope, $rootScope, $state, $location, constants, CookieService, UnregisterService, MessageService, MetaTagsUpdateService) {
    // Update metatags...
    MetaTagsUpdateService.update($state, $scope, 'user', {'<<username>>': $rootScope.loggedInUser});
    $scope.confirmed = false;
    $scope.unregister = function() {
        UnregisterService.save(function() {
            MessageService.addMessage('Goodbye.');
            CookieService.removeAll();
            $location.path(constants.logoutPath);
        }, function() {
            MessageService.addError();
        });
    };
    $scope.confirm = function() {
        $scope.confirmed = true;
    };
});

一旦我单击"高级"渲染该视图并导航回菜单视图，:hover状态在通知<a>上处于活动状态。以下是导航和渲染之前和之后：

之前/之后菜单

我能够连接我的手机，并通过Macbook上的Safari使用网络检查器来确定它是渲染回菜单时激活的:hover状态。并且始终只是高级/通知导致这种情况。所以我的问题是：为什么:hover以这种方式应用？由于这是在移动设备上，因此特别奇特。