css - hover显示隐藏 - div隐藏




单击CSS显示/隐藏div (6)

我有一个菜单和三个隐藏的div显示取决于用户选择的选项。 我想只使用CSS显示/隐藏它们。 我现在正在使用jquery,但我希望它可以通过禁用js来访问。 有人在这里为其他人提供了这个代码 ,但它只适用于div:hover或div:active,当我将其更改为div时:访问它不起作用。 我需要添加一些东西,或者这可能不是正确的方法吗? 我感谢任何帮助:)

事情是我的客户希望这个特定的div在选择菜单时滑动/淡出,但我仍然希望它们能够在关闭javascript的情况下正确显示。 也许z-index可以做到这一点......?


CSS没有onlclick事件处理程序。 你必须使用Javascript。

有关CSS Pseudo-classes的更多信息,请http://www.w3schools.com/css/css_pseudo_classes.asphttp://www.w3schools.com/css/css_pseudo_classes.asphttp://www.w3schools.com/css/css_pseudo_classes.asp

a:link {color:#FF0000;}    /* unvisited link - link is untouched */
a:visited {color:#00FF00;} /* visited link - user has already been to this page */
a:hover {color:#FF00FF;}   /* mouse over link - user is hovering over the link with the mouse or has selected it with the keyboard */
a:active {color:#0000FF;}  /* selected link - the user has clicked the link and the browser is loading the new page */


您可以使用CSS3:target选择器执行此操作。

menu:hover block {
    visibility: visible;
}

block:target {
    visibility:hidden;
}

您将不得不使用JS或使用您正在使用的非标记语言编写函数/方法来执行此操作。 例如,您可以编写一些将状态保存到cookie或会话变量的内容,然后在页面加载时检查它。 如果你想在不重新加载页面的情况下这样做,那么JS将是你唯一的选择。


虽然有点不标准 ,但可能的解决方案是在<a>包含要显示/隐藏的内容,以便可以通过CSS访问:

http://jsfiddle.net/Jdrdh/2/

a .hidden { visibility: hidden; }
a:visited .hidden { visibility: visible; }

<a href="#">A <span class="hidden">hidden content</span></a>

这可以通过将“tabindex”附加到元素来实现。 这将使该元素“可点击”。 然后你可以使用:focus来选择隐藏的div,如下所示......

.clicker {
width:100px;
height:100px;
background-color:blue;
outline:none;
cursor:pointer;
}

.hiddendiv{
display:none;
height:200px;
background-color:green;
}

.clicker:focus + .hiddendiv{
display:block;
}
<html>
<head>
</head>
<body>

<div>
<div class="clicker" tabindex="1">Click me</div>
<div class="hiddendiv"></div>
</div>

</body>

</html>

+选择器将在“clicker”div之后选择最近的元素。 您可以使用其他选择器,但我相信目前没有方法可以选择不是兄弟或孩子的元素。







css