1

現在、HTML/CSS を使用して画像のロールオーバー状態をトリガーしています。このロールオーバー状態は、画像がホバーされたときに表示されますが、親 div で隣接するテキストがロールオーバーされたときにも表示されます。

ただし、モバイル (サイトはレスポンシブ) では、画像をクリック/タップするとこのロールオーバー状態が有効になり、リンクを機能させるには 2 回目のクリック/タップが必要です。

これが起こらないようにするにはどうすればよいですか?

HTMLは次のとおりです。

<div class="four columns post alpha">
            <div class="thumbnail">
                <div class="image">
                <a href="banjee.html"><img class="scale-with-grid" src="images/thumb_banjee.jpg">
                <img class="scale-with-grid hoverimage" src="images/thumb_overlay.png"></a>
                </div>
                <a href="banjee.html"><h3>Banjee</h3></a>


            </div>

対応する CSS は次のとおりです。

.hoverimage { 
    position: absolute; 
    top: 0; 
    left: 0; 
    display: none; 
}

.thumbnail:hover .hoverimage, 
.image:hover .hoverimage { 
    display: block;
    cursor: pointer;
}
4

1 に答える 1

0

Javascript コードを使用して PC からブラウジングするときに、この CSS スタイルを条件付きにします。

if(!(/android|webos|iphone|ipad|ipod|blackberry/i.test(navigator.userAgent.toLowerCase()))){
$(".hoverimage").css({'position':'absolute','top':0,'left':0,'display':'none'});
$(".thumbnail:hover .hoverimage, .image:hover .hoverimage").css({'display':'block','cursor':'pointer'});
}
于 2013-08-19T04:32:24.933 に答える