问题描述
|
我正在使用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弄清楚是怎么回事,但是我还是空着。它告诉我它知道list元素的:hover样式。但是当我检查箭头时,似乎:hover规则不适用于那些元素。
解决方法
这是因为您没有包括典型的样板HTML。您的页面以Quirks模式呈现。
如果添加以下内容:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
并将其余的代码放在应该去的地方,它将起作用。
这是我以前写过的答案,其中的问题是同一件事:
CSS悬停+背景图片