Html css悬停替代方案

将：鼠标悬停在选择器样式链接上。我想当我点击，然后显示元素，而不是鼠标悬停。我应该使用什么样的悬停选项..cssmenu li:hover ul{ 显示：块；

---

}这是演示用的小提琴：

HTML:

Jquery：

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

---

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

<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>

---

但是，IE 8及更早版本不支持：target伪类，因此，如果您希望也涵盖它们，则需要使用一些JavaScript polyfill，例如或Selectivizr，或者使用完全基于JavaScript的方法。

您可以尝试jQuery，这可能会有所帮助。我应该在哪里编写此jQuery？我使用了jspI，在文章中刚刚提到了工作演示。我刚刚创建了提琴用于演示和额外的增强，您需要调整代码。此警报仅用于显示事件正常工作。您必须将jquery库嵌入html页面的head标记中，您可以从此处或从cdn版本下载：

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

<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>