Question

您好我正在再次尝试回答 - 第一次有人建议我如何获得我想悬停的内容，但是当您点击菜单链接时我想要它。

我是网络开发的初学者，目前正在重新设计我的DJ网站。

http://www.jameswinfield.co.uk/v2.html

在左上角的菜单中，我希望在单击“事件”选项卡时显示一个div，以显示我正在播放的下一个事件。

如果可能，我宁愿在没有JavaScript / jQuery的情况下这样做。

我尝试了各种各样的想法，但没有一个有效。

请帮助。

谢谢James

Answer 1

如果您希望您的元素可以切换，则无法使用纯CSS实现。

您可以在CSS中的链接上使用:active来更改样式（例如：显示下一个div）但是如果样式更改在您停止点击后仍然存在，那么这将无法正常工作关于元素。

使用它的一点点工作就是在CSS中使用:target选择器。您的HTML看起来像这样：

<a href="#your_element">Click to toggle</a>

<div id="your_element">This will show up when you click on the link.</div>

在CSS ..

#your_element{display: none;}
#your_element:target{display: block;}

示例：http://jsbin.com/pifiwezaji/1/

这个问题的主要问题是，您的元素会在页面刷新之前显示，我不认为可以在不使用某些Javascript的情况下再次隐藏它。 :target选择器的浏览器支持非常好，除了IE8及以下版本的所有浏览器都支持。

话虽如此，我建议使用Javascript / jQuery。它只需要几行，管理起来会容易得多。

Answer 2

CSS没有点击事件处理。它具有的是:hover伪元素，您可以将其与transition一起用来创建您想要的内容。

我会做这样的事情：

HTML：

<div class='expandable'>
    ...stuff...
</div>

CSS：

.expandable {
    background:#f00;
    height:50px;
    overflow:hidden;
    transition:width 1s ease;
    width:50px;
}

.expandable:hover {
    width:200px;
}

（未测试的）

用简单的英语说：

具有类expandable的div不应该有任何溢出和它应该是50 x 50红色背景。如果宽度变化，过渡1秒钟。当它悬停时，将宽度更改为 200像素。

这应该让你开始。祝你好运！

单击下拉菜单

2 个答案: