Home/ Questions/Q 4274308
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-21T07:49:46+00:00

I’m using the jQuery jCarousel plugin to create a carousel of NFL player photos.

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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