CODEWITHSUNDEEP
htmlcssmobilehover
Colton Anglin
Colton Anglin

Reputation: 461

Hover effect on mobile touch devices (iPhone, Android, Windows)

I'm trying to figure out a way to simulate a hover effect for mobile devices. I've searched around but none seem to work.

The element i'm trying to get to have a mobile hover effect is a link that changes color on hover.

Upvotes: 9

Views: 11047

Answers (3)

Bhushan
Bhushan

Reputation: 11

to give mouseover effect in javascript we have to use jquery-ui.js and jquery.ui.touch-punch.min.js, from ui js we get two important function droppable(); and draggable();
which allows the element to drag and drop but this override draggable = true in HTML5 so if we want to use same code for dekstop as well as phone then use as follows 

 //media query 
 var mq = window.matchMedia( "(max-width: 992px)" );

 if (mq.matches) {
    // window width is at less than 992px
    jqueryobject.draggable();
 }
 else {
    // window width is at gratet than 992px
 }

so we can run same code in dekstop as well as mobile
now the second important point, In HTML5 we use dragstart(), dragleave(), dragover(), drop() for different opration related to drag and drop but in mobile we required touchstart(), touchmove(), touchend() and touchcancel() for drag and drop which we get from jquery.ui.touch-punch.min.js, but for mouse over effect we have to use logic as follows

<div id=drag_el > and <div id=drop_el>

when we drag element touchmove event is fire so in that use 

  var elementTouching = document.elementFromPoint(first.clientX,first.clientY);
      if(elementTouching.id == "drop_el") {
          //apply u'r css effect like
           elementTouching.style.zoom = "120%";
        }
      else{
          // apply normalize effect of css like
            elementTouching.style.zoom = "100%";
       }

It gives you zooming effect on moseover.

Upvotes: 1

Adam D Harrington
Adam D Harrington

Reputation: 353

Good point it may well have a lot to do with the actual phone you are testing on. I usually test with android which seems to cater for long-press and slide-off (so there is no onMouseUp event) by triggering the :hover or :focus state.

It really begs the question though, if a user is really unlikely to trigger this state, is it worth designing for? :Hover is designed for desktop use with a mouse, replicating these interactions on mobile seems counter-productive.

That said, if you are trying to achieve some really interesting interaction for mobile, because it is hard to trigger a hover state without triggering the onMouseUp event, you may be better using elements that do not have links attached to allow clicks without triggering a link.

jQuery has event.preventDefault() which may help for other needs.

Upvotes: 7

user2770714
user2770714

Reputation: 129

New smart phones on the market actually support hover without having to call any JS to make it work. Regular links with the a:hover anchor pseudo classes will achieve the hover action as long as the smart phone supports the hover 'gesture'.

http://developer.sonymobile.com/knowledge-base/technologies/floating-touch/

Upvotes: 5

Related Questions