: состояние зависания применяется при отображении углового вида

Question

Я столкнулся с интересной ошибкой. В приложении Angular 1.2.13 на iOS Safari псевдо-класс :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; 
    }; 
}); 

После я нажимаю на «Advanced» рендеринг этой точки зрения и перейти обратно на вид меню, то :hover состояния активен в уведомлениях <a>. Вот до и после навигации и визуализации:

Before/After menu

я смог подключить мой телефон и использовать веб-инспектор через Safari на моем Macbook, чтобы определить это было :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> 

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