Question

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

Answer 1

以下是演示的小提琴：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;
}

Jquery的：

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

Answer 2

仅使用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

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

Html css悬停替代方案

2 个答案: