如何获得 :hover 状态以使 jCarousel 箭头起作用？

发布于 2024-11-01 16:05:39 字数 816 浏览 5 评论 0原文

我正在使用 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 规则不适用于这些元素。

原文

I'm using the jQuery "jCarousel" plugin to create a carousel of NFL player photos. Everything works great, except the next/previous arrows in the carousel. They don't respond to the CSS rules I created for their :hover states.

Here's a single example page with the HTML and CSS: http://www.joshrenaud.com/pd/picks/jCarouselProblem.html

The style rule for the arrow works fine:

.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;
    }

But the style rule for the hover state does not:

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

I tried using Firebug to figure out what's up, but I'm still coming up empty. It shows me that it knows about the :hover styles for the list elements. But when I inspect the arrows, it's as if the :hover rules don't apply to those elements.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

仲春光 2024-11-08 16:05:39

这是因为您没有包含典型的样板 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 Hover+Background Image

It's because you haven't included the typical boilerplate HTML. Your page is rendering in Quirks Mode.

If you add something like this:

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

<body>
</body>
</html>

and slot the rest of your code where it should go, it will work.

Here's a previous answer I wrote where the problem was the same thing:

CSS Hover+Background Image

回复收藏 0 原文

~没有更多了~