我如何获得：悬停状态以便jCarousel箭头可以工作？

我正在使用jQuery“jCarousel”插件来创建NFL球员照片的轮播。除了传送带中的下一个/前一个箭头，一切都很好。他们不响应我为他们的悬停状态创建的CSS规则。我如何获得：悬停状态以便jCarousel箭头可以工作？

下面是用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弄清楚发生了什么，但我仍然空着。它告诉我它知道：列表元素的悬停样式。但是当我检查箭头时，就好像：悬停规则不适用于这些元素。

来源

2011-04-15 Kirkman14

它为我的罚款。你在IE6中测试吗？ – alex 2011-04-15 00:51:59

不，我在Firefox 4测试。编辑：在阅读您的评论后，我检查了其他浏览器。它在Safari和Chrome中正确运行，但不是Firefox 4. – Kirkman14 2011-04-15 00:55:02

这是因为你没有包含典型的样板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

来源

2011-04-15 00:56:03 thirtydot

你是对的。我是一个白痴。任何想法为什么其他悬停状态工作正常（在列表项上）？ – Kirkman14 2011-04-15 00:58:18

原因在于我链接到的文档中：在Firefox“Quirks Mode”中：除非选择器包含标签名称，ID或属性，否则悬停伪类只应用于链接，图像和表单控件。 – thirtydot 2011-04-15 01:04:56

+1容易忘记doctype有时:) – alex 2011-04-15 01:08:25

我如何获得：悬停状态以便jCarousel箭头可以工作？

回答

相关问题