5

HTML

<div class="container">

    <div class="child">
        <a href="http://www.google.com" target="_blank">Google</a>
    </div>
</div>
<a href="http://www.yahoo.com" target="_blank" class="y">Yahoo</a>

CSS

.container{position: relative;display: block;width: 100px;height: 30px;background: #000;z-index: 7;}
.child{position: absolute;width: 100px;height: 100px;background: #CCC;padding-top: 30px;z-index:9;top: -999px;}
.child a{display: block;}
.container:hover .child{display: block;top: 0;}
.y{z-index: 6;}

作業例： http: //jsfiddle.net/DemjR/6/

上記の例（リンク内）でCSSホバーメニューを作成しましたが、不思議なことに、Androidデバイスのクロム（v 25.0.1364.123）で想定されているように機能しません。しかし、私がテストした他のすべてのデバイス (ios、windows、mac など) では正常に動作します。

問題は（Androidの場合）：黒いボックスにカーソルを合わせると、リンク（google.com）がある灰色のdivが表示されます。

そのリンクをクリックすると、実際には (google.com) ではなく (yahoo.com) の背後にあるリンクがトリガーされます。

これは Android デバイスの Chrome のバグですか?

前もって感謝します

4

3 に答える 3

3

これは、Android 上の Chrome の M25 のバグのようです。エンジニア チームに問題を報告しました。https://code.google.com/p/chromium/issues/detail?id=180194 に従ってください

于 2013-03-05T11:57:40.190 に答える
2

Chromeは、この場合、クリックする前にmouseOUTをトリガーするようなものです。

DIVのHOVERイベントとLINKSのクリックイベントを表示する別のフィドルは次のとおりです。

http://fiddle.jshell.net/gnv9n/18/<-これはすべてのブラウザで機能するはずです。問題はChromeでのみ発生するため、Webkitトランジションのみが使用されます。

css3トランジションを追加すると、クリックが正しくトリガーされます。これは一種の醜い修正ですが、機能します。

Chromeが「ホバリング」する前にクリックに失敗するのを確認したい場合は、cssトランジションを削除してイベントを確認してください

Chromeのチームに問題を提出してくれたKinlanに感謝します。

于 2013-03-05T12:24:23.633 に答える
0

これを Anthony Gatti の回答にコメントしたかったのですが、十分な評判がありません。

設定するよりも優れたオプションは、設定-website-transition-durationすること-website-transition-delayです。

例: http://fiddle.jshell.net/gnv9n/28/

于 2013-12-23T06:12:05.807 に答える