javascript - :hover state applied when angular view rendered

Question

我遇到了一个有趣的错误。在 iOS Safari 上的 Angular 1.2.13 应用程序中 :hover渲染回 View 时伪类处于事件状态。我也在使用 ui-router。

这是标记:

<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 只是为了咯咯笑:

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

一旦我点击“高级”呈现该 View 并导航回菜单 View ，:hover状态在通知上处于事件状态 <a> .这是导航和渲染前后的对比:

Before/After menu

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

Answer 1

由于移动设备上没有悬停状态(您不能悬停，只能单击)，所以它们总是造成麻烦。如果您主要针对移动设备，您的选择是删除悬停状态，或者使用以下常见的解决方法。

首先只有在设置了.no-touch类时才设置悬停样式。

<style>
  .no-touch .nav .nav-pills li a:hover {
    background-color: #eaeaea;
  }
</style>

<ul class='nav nav-pills nav-stacked margin-2'>
  <li>
    <a ui-sref='mobileAboutEdit'>
      About
      <i class='fa fa-chevron-right pull-right'></i>
    </a>
  </li>
</ul>

.no-touch 类是使用简单的 javascript 检查来设置的，该检查确定浏览器是否公开了 onTouchStart 事件。如果不是，您可以断言您不在移动环境中。

if (!("ontouchstart" in document.documentElement)) {
  document.documentElement.className += " no-touch";
}

https://www.nczonline.net/blog/2012/07/05/ios-has-a-hover-problem/提供了有关此问题的非常翔实的文章，以及对所提到的解决方法的详细描述。