2

こんにちは、私のページにはシンプルな CSS ホバー メニューがありますが、タッチ デバイスを使用しているときに IE10 で動作しないようです。

この問題の解決策はありますか?

サンプル: http://jsfiddle.net/Z8Q8T/

HTML:

<ul class="Menu">
  <li>
    <a href="javascript:void(0);">First</a>
    <ul>
      <li>
        <a href="#1" class="Active">1</a>
      </li>
      <li>
        <a href="#2">2</a>
      </li>
      <li>
        <a href="#3">3</a>
      </li>
      <li>
        <a href="#4">4</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="javascript:void(0);">Second</a>
    <ul>
      <li>
        <a href="#5">5</a>
      </li>
      <li>
        <a href="#6">6</a>
      </li>
      <li>
        <a href="#7">7</a>
      </li>
      <li>
        <a href="#8">8</a>
      </li>
    </ul>
  </li>
</ul>

CSS:

.Menu, .Menu ul {
    list-style: none;
    display: block;
    margin: 0;
}
.Menu > li {
    float: left;
    padding-bottom: 1px;
    margin: 0 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-transform: uppercase;
}
.Menu > li:hover, .Menu > li:active {
    position: relative;
}
.Menu li a {
    display: block;
    color: #000000;
    text-decoration: none;
}
.Menu > li > a {
    border-bottom-style: solid;
    border-bottom-width: 3px;
    border-bottom-color: transparent;
}
.Menu > li > a:hover, .Menu > li > a:active {
    border-bottom-color: #A9A9A9;
}
.Menu li > ul {
    margin-top: 0px;
    /* to ensure that we dont leave the ul and the hovering effect stops */
    border-radius: 0 0 3px 3px;
    -o-border-radius: 0 0 3px 3px;
    -ms-border-radius: 0 0 3px 3px;
    box-shadow: 0px 0px 3px #888;
    padding: 0px 2px 2px 2px;
    background-color: White;
    position: absolute;
    left: -4000px;
    /* Hack to fix animation */
    min-width: 100%;
    opacity: 0;
    transition: opacity 0.2s linear;
    -webkit-transition: opacity 0.2s linear;
    -moz-transition: opacity 0.2s linear;
}
.Menu li:hover > ul, .Menu li a:active + ul {
    left: -4px;
    z-index: 100;
    opacity: 1;
}
.Menu li ul > li {
    border-left-style: solid;
    border-left-width: 3px;
    border-left-color: transparent;
    padding: 0 3px;
    margin: 3px 0;
    white-space: nowrap;
}
.Menu li ul > li:hover, .Menu li ul > li:active {
    border-left-color: #A9A9A9;
}
.Menu li ul > li.Active {
    border-left-color: black;
}
4

2 に答える 2

3

Win8 上の IE 10 には、aria 属性による解決策があるようです: http://msdn.microsoft.com/en-us/library/jj152141%28v=vs.85%29.aspx

"インタラクティブなコンテンツの可視性を切り替えるホバー動作を持つページ要素では、要素の aria-haspopup プロパティを "true" に設定します
"ユーザーのエクスペリエンスは、カーソルで要素の上をホバーするユーザーのエクスペリエンスと同じになります. ユーザーがページの他の場所をタップするか、要素を再度タップするか、別のページに移動するまで、要素はホバー状態のままです. さらに、デフォルトonclick イベントのアクション (リンクのナビゲーションなど) は、ページ要素の最初のタップでは実行されません。"

于 2013-08-11T16:14:37.257 に答える
3

:focusこれを使用するたびに追加:hoverすると、メニューがタブやモバイルデバイスで機能するようになります.

これがお役に立てば幸いです。

編集：注：折りたたんで開くメニューを非表示にし、ホバーとフォーカスで表示できるようにすることをお勧めします。タブを押すと、現在ビルドされているように、「見えない」リンクを通過します..そして、悲しいことに、今はフォーカスをドロップダウンしません.

解決策?: いくつかの努力をして、「修正」を見つけました。この jsFiddleは機能するはずです。ただし:focus、すべてのケースでスタイリングをOKにするために、他のCSSルールに追加する必要があります. また、「ドロップダウン」のリンクがフォーカスされている場合、メニューは開いたままにする必要があります。（ただし、これがモバイルで問題を引き起こすとは思いません。）

CSS を少し変更しただけです。

.Menu li a:hover + ul,
.Menu li a:focus + ul,
.Menu li a:active + ul
{
    left: -4px;
    z-index: 100;
    opacity: 1;
}

「+」に注意してください。

于 2013-04-16T08:58:23.300 に答える