iOS と Android および WP7 モバイル ブラウザーで作成したページをテストしていたところ、iOS では css ホバー イベントが発生しないことがわかりましたが、Android と WP7 では動作します。これがなぜなのか、誰かがたまたま知っているでしょうか?これが私が使用しているCSSです。
ありがとうございました
.tooltip
{
position: absolute;
display: block;
visibility: collapse;
z-index: 2;
width: 190px;
height: 163px;
opacity: 0;
color: #777;
background-color:#fff;
top: -20px;
left: -20px;
padding: 0px 0px 0px 0px;
line-height: 25px;
border-radius: 0px 0px 0px 0px;
-moz-transition-property: opacity, visibility;
-moz-transition-duration: 0.3s, 0.1s;
-webkit-transition-property: opacity, visibility;
-webkit-transition-duration: 0.3s, 0.1s;
box-shadow: -1px -1px 4px rgba(0, 0, 0, 0.3);
}
.hover-image:hover .tooltip
{
opacity: 1;
visibility: visible;
}
そしてそれが影響している要素
<figure class="hover-image">
<div><p class="notice">hover on me</p>[AlbumLogoSource]</div>
<p class="item-title">[SGSV:Value:AlbumTitle]</p>
<figcaption class="tooltip">
<ul class="tooltip-inner">
<li><a href="/mypage">
<div class="inner-item-logo">[AlbumLogoSource2]</div></a></li>
<li>
<ul class="tooltip-menu">
<li><a href="/view">view</a></li>
<li><a href="/upload">upload</a></li>
</ul>
</li>
</ul>
</figcaption>
</figure>