How can I get :hover state for jCarousel arrows to work?
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/rig开发者_如何学运维ht-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.
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
加载中,请稍侯......
精彩评论