如何获得 :hover 状态以使 jCarousel 箭头工作？答案

【问题标题】：How can I get :hover state for jCarousel arrows to work?如何获得 :hover 状态以使 jCarousel 箭头工作？
【发布时间】：2011-04-15 00:48:09
【问题描述】：

我正在使用 jQuery“jCarousel”插件来创建 NFL 球员照片的轮播。一切都很好，除了轮播中的下一个/上一个箭头。他们不响应我为他们的 :hover 状态创建的 CSS 规则。

这是一个带有 HTML 和 CSS 的示例页面：http://www.joshrenaud.com/pd/picks/jCarouselProblem.html

箭头的样式规则可以正常工作：

.jcarousel-skin-tango .jcarousel-next-horizontal {
    opacity: 0.6;
    position: absolute;
    top: 10px;
    right: 0px;
    width: 20px;
    height: 135px;
    cursor: pointer;
    background: transparent url(graphics/right-arrow.png) no-repeat 0 0;
    }

但是悬停状态的样式规则没有：

.jcarousel-skin-tango .jcarousel-next-horizontal:hover {
    opacity: 1;
    }

我尝试使用 Firebug 来弄清楚发生了什么，但我仍然一无所获。它告诉我它知道列表元素的 :hover 样式。但是当我检查箭头时，就好像 :hover 规则不适用于这些元素。

【问题讨论】：

它对我很有效。您在 IE6 中进行测试吗？
不，我在 Firefox 4 中进行测试。编辑：阅读您的评论后，我检查了其他浏览器。它在 Safari 和 Chrome 中正常工作，但在 Firefox 4 中不能正常工作。

标签： jquery css hover doctype jcarousel

【解决方案1】：

这是因为您没有包含典型的样板 HTML。您的页面正在Quirks Mode 中呈现。

如果你添加这样的东西：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
</body>
</html>

并将其余的代码放到它应该去的地方，它会起作用。

这是我之前写的问题是同一件事的答案：

CSS Hover+Background Image

【讨论】：

你是对的。我真是个白痴。知道为什么其他悬停状态可以正常工作（在列表项上）吗？
原因在我链接到的那个文档中：在 Firefox “Quirks Mode”The :hover pseudoclass will only be applied to links, images, and form controls, unless the selector includes tag names, ids, or attributes..
确实，亚历克斯。谢谢大家的帮助。