jQuery 颜色变化还是 CSS?

发布于 2024-08-27 09:47:00 字数 280 浏览 5 评论 0原文

我尝试过实现特定字段的悬停/选定颜色更改,但我认为 jQuery 就是答案。我研究了一些按钮单击教程,但也许我不仅仅是看到它或正确执行它。

这里的想法是,当用户将鼠标悬停在标题上时,背景颜色会发生变化,当他们单击标题以展开标题时,背景颜色保持不变(选定),但就目前情况而言,展开字段的背景颜色会发生变化不改变。

这是演示: http://www.notedls.com/demo

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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

绮筵 2024-09-03 09:47:00

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

高跟鞋的旋律 2024-09-03 09:47:00

我看到您有 JQuery 在单击时将选定的类添加到您的 li 元素。根据您想要执行的操作,您可以为 li.selected 背景颜色着色,或根据 li.selected 元素定位 div。

ul#acc1 li.selected {
   background-color: #xxxxxx;
}

ul#acc1 li.selected div {
   background-color: #xxxxxx;
}

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.

ul#acc1 li.selected {
   background-color: #xxxxxx;
}

ul#acc1 li.selected div {
   background-color: #xxxxxx;
}
逐鹿 2024-09-03 09:47:00

出于可访问性的原因,这些应该被创建为一组 。列表内的标签。这样屏幕阅读器/键盘选项卡将停止在超链接上。

然后,您可以使用伪类(状态),例如 CSS 中的悬停,这样即使脚本被禁用,这也将起作用。

a:link {background-colorr:#FF0000;}      /* unvisited link */
a:visited {background-color:#00FF00;}  /* visited link */
a:hover {background-color:#FF00FF;}  /* mouse over link */
a:active {background-color:#0000FF;}  /* selected link */

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.

a:link {background-colorr:#FF0000;}      /* unvisited link */
a:visited {background-color:#00FF00;}  /* visited link */
a:hover {background-color:#FF00FF;}  /* mouse over link */
a:active {background-color:#0000FF;}  /* selected link */
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文