Comments on: Non Hover

By: Pixelutely

Pixelutely — Mon, 09 Jan 2012 09:06:55 +0000

I couldn’t agree more about the over-use of hover states in web design. In many respects we need to take a leaf out of the “320 and up” school of thought - designing for the smallest screens and mobile/handheld/browser limitations. You only have to take a look at this very site design to see how effective well-considered typography and and colour is put to good use without design/effect overkill.

By: Paul

Paul — Sun, 11 Dec 2011 10:51:34 +0000

Call me whatever, I hate iPad.

Instead of adjusting to fit what iPad/iPhone has to offer, why not let Apple work a lil’ bit more to meet up with the (already) standard UX ?

Mouse, primarily, is built to represent hand gestures, we have come a long way to use mouse movements to maneuver the interface, now we have handheld devices with more choice of gestures, that is really really great but it’s great in addition with what we already have.

So wouldn’t it be better to see an article like this:

“iPad still don’t work well with the standard css hover.”

rather than:

“Hey, if you stop using pseudo:hover, you are in.”

By: Andy Fattoracci

Andy Fattoracci — Fri, 09 Dec 2011 01:36:03 +0000

You know, I think that if you are indeed coding your web pages properly (ei: following standards and not doing crap work) you would not have much of a problem making the states work for Ipads:

ontouchstart=“this.onmouseover” ontouchend=“this.onmouseout”

Although not w3c valid yet, this Seems to work pretty good on just about everything I slap it into.

It’s not much harder if you are catching events to just duplicate your code and change the main event you are catching, and make it use the same function.

I have seen catastrophic non standard CSS mazes in the past, and NATURALLY they won’t work as easily.

But that’s also where Javascript can come to the rescue a little, you can easily change the CSS onmouseover through Javascript and the CSS DOM structure.

So let’s say our main issue is the “hover” state for links;
In addition to the simple CCS pseudo classes, we can easily (and should for full browser compatibility) add a simple “onmouseover” event to underline the text.
this.style.textDecoration=‘underline’ for instance.
This works really well when in line naturally, but if you wish to lighten the code, it’s just as simple to pass “this” as the object of whatever function you want to call for the event.
Keep in mind that if you are messing around with catching events, you usually pass “this” already.

Regardless, it is evident as to why Apple choose not to adapt the standard behaviour; A touch is not a mouse-over.
But at the same time, IF the website is properly coded, it is fairly simple to have the same exact behavior work as needed on both platforms; Ergo, it would be nice if Apple could create a JavaScript Browser variable for safari mobile, allowing us developers to choose if the events should follow the same actions.

By: Janek

Janek — Thu, 29 Sep 2011 14:29:17 +0000

Stumbled upon this post just now because the problem seems to be more and more actual. Thank You for great summary of what are the options.
I just want to add, that if someday the touch devices will have hover effect, it won’t be the same as now. New problems will arise, and the content will be rewritten once again. Imagine a dropdown menu on hover. The “down” keyword is the problem with a huge hand over the suddenly displayed content which user won’t be able to read without breaking his wrist. So simply return to what is now common won’t work.

By: matthew

matthew — Thu, 07 Jul 2011 09:08:23 +0000

nearly a year after this post - june 21, 2011: the multitouch shot heard round the world in 2007 hits its mark [http://tiny.cc/4p0jk]. while i understand concerns such as those nigel expressed, were innovators like apple to adopt the same mindset, they would soon stagnate and go out of business. it is precisely tech widgets that could be labeled ‘industrialised western luxury’ that help drive R&D forward, and with them, other cultural and intellectual developments across societies. the socioeconomic gap may always exist in some form, and may always generate similar emotional reactions across that divide, but in context, the points made by this post, at this date and with the sales data rolling in, are more relevant than ever before. Trent, thank you for this helpful and well-designed post! Success on you.

By: Jon

Jon — Mon, 11 Apr 2011 15:21:10 +0000

I recently created an intro page with :hover tooltips and some jQuery effects on the image links. It looks like on iPhone, the behavior is that the first tap brings up the hover state, and the second tap pulls up the link. I thought it might not be the most intuitive thing in the world, but certainly better than the Flash intro it was replacing. The first email I got was from my boss, saying, “I pulled this up on my iphone, and it doesn’t seem to be working.” Then, minutes later, I got an identical email from the client. It’s painful, but you’re absolutely right, it can’t be ignored anymore.

By: Fayez Mohammed Hossain

Fayez Mohammed Hossain — Tue, 18 Jan 2011 09:12:09 +0000

Touch is a technology of the future. It’ll help us to find new electronics goods in the future to use. So we should meet our hand together for make everythings for the future.

By: Joe Taylor

Joe Taylor — Wed, 20 Oct 2010 12:15:08 +0000

Good read. Hover isn’t going anywhere. There are cases (mouse, wii remote etc) it’s necessary. Active needs to be addressed for touch devices. It’s that simple (sortof), right?

By: Al Sparber

Al Sparber — Wed, 20 Oct 2010 02:47:24 +0000

Interesting that I showed this page to several “civilian” guests at my home this evening and they had no idea that text in red indicated links. That said, one solution to Apple and Google touch devices is media queries to serve them targeted CSS to address major issues that would cause accessibility problems. Other issues are minor and easily addressed by a capable web developer. People seem to be making a mountain out of a molehill.

By: Thorsten

Thorsten — Wed, 08 Sep 2010 09:53:38 +0000

Before reading your article I wasn’t aware about this issue. Great article, keep on the good work. :)