html - Html css 悬停替代

Question

:hover 选择器样式在鼠标悬停时链接。我想当我点击然后显示元素而不是鼠标悬停。我应该使用什么悬停替代方案..#cssmenu li:hover ul{ display:block; }

Answer 1

仅使用 HTML 和 CSS 的简单方法是基于:target伪类：

<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

但是，:targetIE 8 和更早版本不支持伪类，因此如果您也希望覆盖它们，则需要使用一些 JavaScript 填充程序，例如IE7.js或 Selectivizr（或使用完全基于 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;
}

查询：

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