点击时的CSS3动画
以下 zip 包含网站 html 和所需文件： http://dl.getdropbox.com/ u/4281191/login.zip
当您悬停 html (html:hover) 时，您会看到一个将容器转换为登录框的动画，我希望在单击时发生这种情况改为在“您好，访客”菜单中“登录”。
无论如何要完成这件事吗？我是 js 新手...
附加信息：
css 位于 html 内， 并且 css3 动画的触发方式是：
html:hover id/class {
property: value;
}
感谢您的帮助！ 而且我不能在评论中投票，因为我没有足够的声誉......但我可以为帮助我的人做一些免费的设计工作^^
The following zip contains the website html and required files: http://dl.getdropbox.com/u/4281191/login.zip
When you hover the html (html:hover) you see a animation that transforms the container into a loginbox, I want that to happen when I click on "Login" at the "Hello, Guest" menu instead.
Anyway to get this done? I'm new to js...
Additional info:
the css is inside the html,
and the css3 animation gets triggered by:
html:hover id/class {
property: value;
}
Thanks for any help!
And I can't vote at comments since I don't have enough reputation...but I could do some free design work for the person who helps me ^^
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我仍然对动画了解不多，但对于这里重要的事情，您可以使用 .classname:active 或 .classname:focus 选择器之类的东西。但是一旦您单击其中的某些内容（例如文本框），样式就会消失。
因此，对于这一点，这确实取决于。您是否只想要一个包含将用户带到另一个页面的链接的菜单（对于这种情况，您会没事的）还是想要一个登录表单（对于这种情况，忘记它，使用jquery）？
为了今天和将来的参考，请保存此链接，因为它将是您最好的朋友：
http:// www.w3.org/TR/selectors/#selectors
更新
是的，我徘徊，但我没有看代码。我现在看了，不幸的是，答案是否定的。您无法影响某些上层对象（例如使用 CSS 的对象）。
为此，请使用 jQuery。更简单的方法是使用 jQuery 将类添加到要更改的元素（例如 $("#the-object-id").addClass('class-name')）。要保持效果，请添加持续时间参数。阅读此页面，了解使用 jQuery 添加类。
I still don't know much about animations, but for what matters here, you could use something like the .classname:active or .classname:focus selectors. But as soon as you click something inside it (e.g. a text box), the style will disappear.
So, for this, it really depends. Do you just want a menu that has links that take the user to another page (for this case, you'll be fine) or do you want a login form (for this case, forget it, use jquery)?
For today and future reference, save this link because it'll be your best friend:
http://www.w3.org/TR/selectors/#selectors
Update
Yes, I hovered but I didn't look at the code. I looked now and, unfortunately, the answer is no. You can't affect some upper level object like that using CSS.
For that use jQuery. The simpler way would be use jQuery to add a class to the element you want to change (like $("#the-object-id").addClass('class-name')). To keep the effect add the duration argument. Read this page about Adding a class using jQuery.