Question

我正在使用jQuery“jCarousel”插件来创建NFL播放器照片的旋转木马。一切都很好，除了转盘中的下一个/前一个箭头。它们不响应我为其创建的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来弄清楚是什么，但我仍然空着。它告诉我它知道列表元素的：悬停样式。但是当我检查箭头时，就好像：悬停规则不适用于那些元素。

Answer 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

我怎样才能获得：jCarousel箭头的悬停状态？

1 个答案: