IOS8 hover/focus behavior changed (I believe?)

IOS8 now seems to not show a hover/focus effect. I noticed this when my menu stopped working as expected.

Here is my test page showing the behavior. http://www.websitecodetutorials.com/projects/projects/ios8.html

I tried adding :active but it didn’t change it. Chrome mobile shows the hover effect before following the link. And the older versions of iOS did as well. Can you all find a solution to it?

Yes it seems that the link is followed first so the focus state isn’t shown (unless the link is on the same page). If you use the back button then the menu item is shown expanded so the style is working but only seems to be applied after the link is followed. (I’m not sure this is a problem though because you are leaving the page.)

I thought you might have been able to replicate by applying tabindex to the list item so that t can take focus and then style the anchor from the list item but that didn’t seem to work either.

You could add some Js to help. Something like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>IOS 8 hover/focus behavior</title>
<style type="text/css">
a {
	display:block;
	width:88px;
	height:18px;
	font-size:10px;
	font-weight:bold;
	border:2px solid #000;
	background:#fff;
	margin:5px;
}
a:hover, a:focus, a:active,a.mHover {
	width:120px;
	height:22px;
	font-size:11px;
	text-decoration:none;
}
</style>
</head>
<body>
<h1>IOS 8 hover/focus behavior</h1>
<ul>
		<li><a href="#"># in href</a></li>
		<li><a class="mobileHover" href="http://google.com">google.com in href</a></li>
</ul>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
// Add mobileHover class to elements with hover effects so that mobile browsers can play.
$(document).ready(function() {
    $('.mobileHover').bind('touchstart touchend', function(e) {
        $(this).toggleClass('mHover');
    });
});

</script>

</body>
</html>

Hey thanks a lot Paul! That will work.

In this instance the no hover (no indication at all really) is out of place and not user friendly. The user has to look above to see if the browser is loading a page - to see if they really clicked the link. So I need the hover. I guarantee ios will put it back eventually as people start to notice.

In my testing I found 2 ways hover/focus still work. Changing display or visibility. Likely so they don’t break every drop down on the web. So maybe a margin change will work here too. I like css thigs like this. The fix favours the persistent. I will keep looking for some css combo that tricks it into working. Untill I do I will use the nifty js. Thanks!

I was able to find one other way as well. Your method Paul (the one i’ll likely use), when you click on it it shows the hover and follows the link. This second way, one click shows the hover, and second click follows the link.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>IOS Safari :hover and :focus fix: jQuery Method 2</title>
<style type="text/css">
a {
display:block;
width:88px;
height:18px;
font-size:10px;
font-weight:bold;
border:2px solid #000;
background:#fff;
margin: 5px;
}
a:hover, a:focus {
width:120px;
height:22px;
font-size:11px;
text-decoration:none;
}
</style>
</head>
<body>
<h1>IOS Safari :hover and :focus fix: jQuery Method 2</h1>
				<ul>
					<li><a href="#"># in href</a></li>	
					<li><a href="http://google.com">google.com in href</a></li>
				</ul>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

    $('a').each(function() {

        var clicked = false;

        $(this).bind('click', function() {

            if(!clicked) return !(clicked = true);
        });
    });
});
</script>
</body>
</html>

And doing your method this way you can apply a blanket hover fix to all anchors. No css or html classes needed. Aside the one jquery adds.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>IOS Safari :hover and :focus fix: jQuery Method 3</title>
<style type="text/css">
a {
display:block;
width:88px;
height:18px;
font-size:10px;
font-weight:bold;
border:2px solid #000;
background:#fff;
z-index: 1;
margin: 5px;
}
a:hover, a:focus {
width:120px;
height:22px;
font-size:11px;
text-decoration:none;
}
</style>
</head>
<body>
<h1>IOS Safari :hover and :focus fix: jQuery Method 3</h1>
				<ul>
					<li><a href="#"># in href</a></li>	
					<li><a href="http://google.com">google.com in href</a></li>
				</ul>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('a').bind('touchstart touchend', function(e) {
        $(this).toggleClass('mHover');
    });
});
</script>
</body>
</html>

I looked at it again and couldn’t see any pure css solution.

I did notice though that even chrome on the desktop does not apply the focus rule to the anchor unless the item has a tabindex applied. I thought that it might have provided a solution for ios but no luck.

Anything that makes the link move makes it work. Like if you give the “a” position absolute but no position. Then top 0 on hover it works. There should be some combo that tricks it. But I haven’t found it. Some -webkit property possibly. I tried many things this morning as well and nada.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.