：懸停狀態適用於角度視圖呈現

Question

我遇到了一個有趣的錯誤。在iOS Safari的1.2.13版Angular應用中，當渲染回視圖時，僞類將處於活動狀態。我也使用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>。這裏有一個前後導航和渲染後：

Before/After menu

我能連接我的手機，並使用通過Safari Web檢查我的MacBook決定渲染回來時，它被激活: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/提供了非常翔實的寫了這個問題，與標註工作的詳細說明沿着左右。

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