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

Question

我遇到了一个有趣的bug。在iOS Safari上的Angular 1.2.13应用程序中，:hover伪类在渲染回视图时是活动的。我也在使用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('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;
    };
});

单击“高级”呈现该视图并导航回menu视图后，通知<a>上的:hover状态为active。以下是导航和渲染之前和之后的情况：

Before/After menu

我能够挂上我的手机，并通过我的Macbook上的Safari使用web检查器来确定渲染回菜单时是否激活了:hover状态。而导致这种情况的总是Advanced/Notifications。所以我的问题是:为什么: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>

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

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

https://www.nczonline.net/blog/2012/07/05/ios-has-a-hover-problem/提供了一篇关于这个问题的非常详细的文章，以及对所提到的工作的详细描述。

Answer 2

我喜欢在手机上提供的关于.no-touch类和:hover状态的信息。然而，我继承了一个大型项目，它安装了默认的Bootstrap，为公司安装了一个自定义的Bootstrap，然后更多的自定义样式表试图覆盖前两个项目中的内容。考虑到我所看到的问题是如此特定于项目中的一个.nav和li a，我只是在SCSS中通过媒体查询来针对它：

ul.nav-stacked {
    // ...stuff
        a {
            //..stuff
            &:hover {
                background-color: rgba($gray-lighter, 0.3);
                @media (max-width: $screen-sm-min) {
                    &:hover {
                        background-color: transparent;
                    }
                }
            }
        }
    }