jQuery 颜色变化还是 CSS?
我尝试过实现特定字段的悬停/选定颜色更改,但我认为 jQuery 就是答案。我研究了一些按钮单击教程,但也许我不仅仅是看到它或正确执行它。
这里的想法是,当用户将鼠标悬停在标题上时,背景颜色会发生变化,当他们单击标题以展开标题时,背景颜色保持不变(选定),但就目前情况而言,展开字段的背景颜色会发生变化不改变。
I've tried achieving a hover/selected color change for a particular field, but I'm thinking jQuery is the answer. I've looked into some button click tutorials, but maybe I'm not just seeing it or doing it correctly.
The idea here is that when a user hovers over a Headline, the background color changes, when they click the headline to expand it, the background color remains constant (selected), however as it stands right now the background color of the expanded fields do not change.
Here is the demo:
http://www.notedls.com/demo
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
使用 jQuery 添加/删除设置样式的类。这将使 css 与代码分离,这是一个更好的解决方案,尤其是在涉及设计人员的情况下。
Use jQuery to add/remove classes that set the styles. This will keep css separate to the code, which is a better solution, especially if designers are involved.
我看到您有 JQuery 在单击时将选定的类添加到您的 li 元素。根据您想要执行的操作,您可以为 li.selected 背景颜色着色,或根据 li.selected 元素定位 div。
I see that you have JQuery add a selected class to your li element when clicked. Depending on what you want to do, you can color the li.selected background color, or target the div based on the li.selected element.
出于可访问性的原因,这些应该被创建为一组 。列表内的标签。这样屏幕阅读器/键盘选项卡将停止在超链接上。
然后,您可以使用伪类(状态),例如 CSS 中的悬停,这样即使脚本被禁用,这也将起作用。
For accessibility reasons these should be created as a set of <a> tags inside the list. This is so that a screen reader/ keyboard tab will stop on the hyperlink.
You can then use pseudo-classes (states) such as hover in css so this will work even if script is disabled.