I am having a problem with the jQuery Cycle plugin. I am trying to create a slideshow of images that change(fade) when an element in the pager nav is hovered on. (This is supposed to be possible as per the jQuery Cycle Plugin docs <http://malsup.com/jquery/cycle/pager2.html>)
I have one div holding the images and the div on the right of it is the navigation div that holds the pager elements.
The navigation/pager div is made up of an ul that contains <a> & <img> tags. So like this <ul><li><a><img>.
1. I want the background image of the <a> tag to change when I hover over a nav element.
2. However, as an additional requirement I need the background image to remain changed even when I hover off.
i.e. my initial background image is white. When I hover over a nav element the background of that and only that element changes to green and I want it to stay green even when I hover off (untill I hover on some other nav element)
I can perform Need 1. by using the jQuery .hover function.
Need 2. is what I can't get to work.
According to the Cycle plugin docs, when you hover over a nav element, the cycle plugin gives it a "activeSlide" class and you can supposed to be able to manipulate the style of the element using this class. I have tried to do this but it doesn't work.
I have tried not using the jQuery hover function and doing this in CSS. But nothing. Here is my css
$("#Nav a").css("background-image","Hover.gif"); $("#Nav a.activeSlide").css("background-image","Normal.gif");
Any help is highly appreciated as I have spent hours and hours trying to figure this out.