如何解决如何获得jCarousel箭头起作用的:hover状态?
| 我正在使用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悬停+背景图片
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。