我遇到了一个有趣的错误。在 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
以这种方式应用?由于这是在移动设备上,因此特别奇特。
由于移动设备上没有悬停状态(不能悬停,只能单击),因此它们总是会引起麻烦。如果主要面向移动设备,则可以删除悬停状态,也可以使用以下常见解决方法。
首先,仅在有.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/提供了关于这个问题的非常翔实的文章,以及对所指出的解决方法的详细描述。
我喜欢提供的有关移动设备上.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;
}
}
}
}
}