问题
My navigation is quite simple. I have a hover state which adds a border and a transparent gradient png background to some text, and an additional class which, when added by jQuery, adds color behind that transparent image.
If you click to toggle the class in a web browser you'll see the color come in and out, but the background image stays if you never move the mouse away from the button. This is expected behavior.
My problem is that when using an iPad, the touch seems to retain the hover state and the :hover properties never go away unless you click another button, in which case the persistent :hover properties are added to that button until another is pressed.
I can't imagine that I am the first with this problem, but searches haven't turned anything up.
Help?
Normal - Hover - Active (via addClass() )
回答1:
Hover is a CSS pseudo class designed to work with a pointer not so much with touch events. You would normally want to avoid the use of hover altogether since it makes no sense on mobile. One of the easiest ways to deal with this is by placing your hover CSS inside a media query. You can do this by targeting tablets or desktop screens, here are the two solutions:
1- Targeting iPads:
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
RE.no-touch .my-element:hover {
/* in here you cancel all hover styles you applied for desktop */
}
}
2- Targeting desktops:
@media only screen
and (min-width : 1224px) {
RE.no-touch .my-element:hover {
/* in here you apply hover styles that will only work on desktop */
}
}
Either way is valid. You can change the values of min and max width if you notice that the CSS is being triggered incorrectly in certain devices.
回答2:
If you're using Modernizr, the no-touch class will be added to the root html element for non-touch devices. Then you can do this:
a.myclass {
color:#999;
}
.no-touch a.myclass:hover,
a.myclass:active {
color:#ccc;
}
回答3:
This is how I fixed it for my list with a hover:
CSS:
ul {background-color:#f3f3f3;}
li:hover {background-color: #e7e7e7}
jQuery:
$(document).ready(function () {
$('li').on('touchstart', function () { $(this).css('background-color', ''); });
$('li').on('touchend', function () { $(this).css('background-color', 'inherit'); });
});
And a fix for hover on back buton navigation...
<body onunload="$('a').blur();">
or
$(window).unload( function () { $('a').blur(); } );
For the uninitiated, the unload event occurs right before the browser leaves the page. By blurring all of the links in the page on unload, I was able to un-stick the hover state. Returning to the original page using the back button shows the clicked link in the default state.
Unfortunately, an onclick event doesn't seem to trigger the unload, but a refresh does in iOS 5?!
Stuck On :hover - http://www.aaronpinero.com/articulated/2011/05/28/stuck-on-hover/ Use jQuery to replace - http://www.nerdboy.co.uk/2009/01/use-jquery-to-replace-body-onunload/
回答4:
I ran across this issue as well. My problem was on the iPad, if I tapped an anchor and scrolled slightly, a click event did not fire but the element would retain the hover state CSS. My belief is that the iPad was actually retaining a focus state and applying the :hover CSS styles in an effort to simulate the desktop experience.
A non-JS and practical workaround is to not deliver hover styles to touch devices if there is not a need for them. Touch devices do not have a "real" hover state, however it appears hover is simulated when an element is focused or tapped-and-scrolled upon.
So with Modernizr.js loaded, I moved my hover styles into the scope of .no-touch -
i.e.
/* Only deliver hover styles to non-touch devices */
.no-touch .my-element:hover {
/* hover styles */
}
Then, when the element is clicked I am toggling an active class on it.
.my-element.active {
/* active styles */
}
The only negative takeaway is you do not get a "being tapped state". I have yet to investigate a solution for that as it's not really important for my apps.
回答5:
you need to catch the following events
touchstart - when your finger touches the screen
touchend - when your finger leaves the screen
think of as hover and unhover, if you can post some code we can help you more if you don't understand what I am saying
$('element').on('touchstart', function(){
// apply hover styles, or better yet addClass() of hover styles
});
$('element').on('touchend', function(){
// removeClass or remove styles, in here you set it to default so even if it is focused, it makes no difference
});
Give some sample code, the touchstart and end should solve the problem
回答6:
This is an old post but I was struggling with this today in 2019, and I find this clean solution and I want to share with all of you.
<a href="#">Try hovering over me!</a>
@media (any-hover: hover) {
a:hover {
background: yellow;
}
}
Basically what are we doing here is using hover in any device with pointer mechanism. Nowadays there is softwares with html readers for a better accessibility of the site and should not be a good idea, deactivate :hover for all mobile devices. Just to be clear, any device without pointing mechanism the hover will not take effect, otherwise we applied the :hover style.
回答7:
If you are using SCSS, I recommend you do the following:
// primary-buttons
.primary-button, .primary-button:visited,
.primary-button:focus {
background: red;
color: white;
}
.primary-button:hover {
background: green; // Only for big screens
@media(max-width: 768px) {
background: red;
}
}
If you reset the value of the background to the initial value, you will no longer have problems with the button being pressed on devices <= 768px resolution
回答8:
This is a workaround:
var btn = jQuery(".nav-menu ul li:first");
var btn_new = btn.clone(true);
btn.remove();
jQuery(".nav-menu ul").append(btn_new);
来源：https://stackoverflow.com/questions/10642953/mobile-safari-links-retains-focus-after-touch