html - iPad 上的悬停效果(或同等效果)

Question

在 iPad 上运行此功能的最佳方法是什么？参见 http://jsfiddle.net/GHU7b/这基本上是带有 onmouse over 效果的 cicles。当用户使用 iPad 访问页面时，是否有插件或其他东西可以用“手指触摸”代替 HOVER 效果？非常感谢，

<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 没有悬停事件，您可以添加 :active 选择器，以便当用户通过鼠标悬停元素 (:hover) 或在 iPad 上触摸它 (:active) 时触发所有动画。

这个 fiddle 应该也适用于 iPad:http://jsfiddle.net/GHU7b/1/

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

编辑:

我猜你必须使用 <a>标签而不是 div，因为它们不会在触摸设备上触发 :active 事件:

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