jQuery颜色变化或CSS？答案

【问题标题】：jQuery color change or CSS?jQuery颜色变化或CSS？
【发布时间】：2011-02-04 01:10:37
【问题描述】：

我已经尝试为特定字段实现悬停/选定的颜色更改，但我认为 jQuery 就是答案。我查看了一些按钮点击教程，但也许我不只是看到它或做得正确。

这里的想法是，当用户将鼠标悬停在标题上时，背景颜色会发生变化，当他们单击标题以展开它时，背景颜色保持不变（选中），但是现在它的背景颜色扩展字段不会改变。

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

【问题讨论】：

嗯，背景颜色保持不变，就像现在在 Google Chrome(Linux) 中一样

标签： jquery css colors hover

【解决方案1】：

使用 jQuery 添加/删除设置样式的类。这将使 css 与代码分开，这是一个更好的解决方案，尤其是在涉及设计人员的情况下。

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

然后您可以使用伪类（状态），例如在 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 */

【讨论】：