Эффект наведения (или эквивалент) на iPad

Question

Какой будет лучший способ заставить это работать на ipad? См. http://jsfiddle.net/GHU7b/, который в основном связан с эффектами onmouse. Есть ли плагин или что-то, что заменит эффект HOVER «на пальце», когда пользователи посещают страницу с iPad? Большое спасибо,

<div id="touchPointContainer"> 
      <div id="touchPoint1" class="touchPoint"> 
       <p class="initial">Changement</p> 
       <p class="final">Le dfsfds est un fddsf dfs de changement</p> 
      </div> 
      <div id="touchPoint2" class="touchPoint"> 
       <p class="initial">Rapidité</p> 
       <p class="final">Le dsfds est un processus court : quelques dsfsf en moyenne pour dsfs l’dfs fixé</p> 
      </div> 
      <div id="touchPoint3" class="touchPoint"> 
       <p class="initial">Orientation</p> 
       <p class="final">Le coadfsfdsment dsfs vers le présent et sdf l’action</p> 
      </div> 
      <div id="touchPoint4" class="touchPoint"> 
       <p class="initial">Ressources</p> 
       <p class="final">Le cdfdsfds ources existantes (et pardfdsfs et si nécessaire sur l’dfs de dfds compétences</p> 
      </div> 
      <div id="touchPoint5" class="touchPoint"> 
       <p class="initial">Créativité</p> 
       <p class="final">Stimulation dsfdsfdsussant à réinventer sa visidfdsfématique et donc les dfdsf qu’il peut y apporter</p> 
      </div> 
      <div id="touchPoint6" class="touchPoint"> 
       <p class="initial">Autonomie</p> 
       <p class="final">L’objectif du dfdsfsd dsfdsfoblématiques</p> 
      </div> 
     </div> 

#touchPointContainer { 
    height: 600px; 
    position: relative; 
} 
.touchPoint { 
    height: 80px; 
    width: 80px; 
    border-radius: 50%; 
    -webkit-border-radius: 50%; 
    -moz-border-radius: 50%; 
    background: rgba(255, 255, 255, 0.9); 
    box-shadow: 0px 0px 4px 6px rgba(0, 0, 0, 0.1); 
    -webkit-box-shadow: 0px 0px 4px 6px rgba(0, 0, 0, 0.1); 
    -moz-box-shadow: 0px 0px 4px 6px rgba(0, 0, 0, 0.1); 
    -o-box-shadow: 0px 0px 4px 6px rgba(0, 0, 0, 0.1); 
    position: absolute; 
    text-align: center; 
    color: #5bb6e7; 
    font-size: 12px; 
    -webkit-transition: width .2s, height .2s, margin .2s; 
    -moz-transition: width .2s, height .2s, margin .2s; 
    -o-transition: width .2s, height .2s, margin .2s; 
    -ms-transition: width .2s, height .2s, margin .2s; 
    transition: width .2s, height .2s, margin .2s; 
} 
.touchPoint { 
    display: table; 
} 
.touchPoint p { 
    vertical-align: middle; 
    display: table-cell; 
    font-size: 11px; 
} 
.touchPoint .final, 
.touchPoint:hover .initial { 
    display: none; 
} 
.touchPoint .initial, 
.touchPoint:hover .final { 
    display: table-cell; 
} 

.touchPoint:hover { 
    height: 160px; 
    width: 160px; 
    margin: -40px 0px 0px -40px; 
    padding: 5px; 
    -webkit-transition: width .2s, height .2s, margin .2s; 
    -moz-transition: width .2s, height .2s, margin .2s; 
    -o-transition: width .2s, height .2s, margin .2s; 
    -ms-transition: width .2s, height .2s, margin .2s; 
    transition: width .2s, height .2s, margin .2s; 
} 


#touchPoint1 { 
    top: 260px; 
    left: 140px; 
} 
#touchPoint2 { 
    top: 240px; 
    left: 440px; 
} 
#touchPoint3 { 
    top: 150px; 
    left: 670px; 
} 

#touchPoint4 { 
    top: 90px; 
    left: 480px; 
} 

#touchPoint5 { 
    top: 390px; 
    left: 300px; 
} 

#touchPoint6 { 
    top: 370px; 
    left: 670px; 
} 

Answer 1

Поскольку IPad не имеет никакого события парения можно добавить: активный селектор, так что все анимации запускаются, когда пользователь наводит курсор на элемент с помощью мыши (Наведите указатель мыши) или касается его на IPad (: активные).

Эта скрипка должна работать на IPad, а также: http://jsfiddle.net/GHU7b/1/

.touchPoint .final, 
.touchPoint:hover .initial, 
.touchPoint:active .initial{ 
    display: none; 
} 

Edit:

Я думаю, вы должны использовать <a> тегов вместо див, потому что они не вызывают: активный событие на сенсорных устройствах:

http://jsfiddle.net/GHU7b/3/