html - Html CSS ホバー代替

Question

:hover セレクター スタイルは、マウスオーバーでリンクします。クリックすると、マウスオーバーではない要素が表示されます。どのホバー代替手段を使用する必要がありますか..#cssmenu li:hover ul{ display:block; }

Answer 1

:targetHTML と CSS のみを使用する単純なアプローチは、疑似クラスに基づいています。

<style>
#cssmenu li ul {
  display: none;
}
#cssmenu :target ul  {
  display: block;
}
 li:hover ul { display:block; }
</style>
<h1>menu with target</h1>
<ul id="cssmenu">
    <li><a id=sub1 href=#sub1>submenu 1
        <ul>
            <li>foo</li>
            <li>bar</li>
        </ul></a>
    </li>
    <li><a id=sub2 href=#sub2>submenu 2
        <ul>
            <li>item A</li>
            <li>item B</li>
            <li>item C</li>
        </ul></a>
    </li>
</ul>

jsfiddle

ただし、:target疑似クラスは IE 8 以前ではサポートされていないため、それらもカバーしたい場合は、IE7.jsや Selectivizr などの JavaScript ポリフィルを使用する (または完全に JavaScript ベースのアプローチを使用する) 必要があります。

Answer 2

デモのフィドルは次のとおりです。http://jsfiddle.net/dineshswami/nXGYc/

HTML:

<ul id="cssmenu">
    <li>1</li>
    <li>2
        <ul>
            <li>A</li>
            <li>B</li>
        </ul>
    </li>
</ul>

CSS:

ul#cssmenu ul{
display:none;
}

Jクエリ:

$(document).ready(function () {
    alert("bang");
    $("#cssmenu li").click(function () {
        alert("bang bang");
        $("#cssmenu li ul").show();
    });
});