So all I’m trying to do is fade the background of a black box to red on mouseover and back to black on mouseoff. I know how to do this, but it’s not working for some reason. However, if I tell it to change another attribute, it will do that, but the background color won’t change on hover.
I’m using the jQuery plug-in scrollable (http://flowplayer.org/tools/scrollable.html) on a page that contains 4 divs. Scrollable automatically generates a tiny nav bar to scroll through the content based on the number of divs there are.
Here is the css for the scrollable objects:
Code:
div.scrollable {
position: relative;
overflow: hidden;
background: transparent;
width: 775px;
height: 400px;
}
#content {
background: transparent;
clear: both;
position: absolute;
width: 20000em;
}
#content div {
float: left;
width: 775px;
height: 400px;
background: transparent;
color: #000000;
}
div.navi {
height: 20px;
margin-left: 78px;
width: 200px;
}
div.navi a {
background: #000000;
cursor: pointer;
float: left;
height: 10px;
margin: 3px;
width: 10px;
}
This is my javascript:
Code:
$(function () {
// initialize scrollable
$(‘div.scrollable’).scrollable({
size: 1,
vertical: false,
loop: false,
interval: 0,
clickable: true,
speed: 1000,
keyboard: true,
items: ‘#content’,
navi: ‘.navi’,
naviItem: ‘a’,
easing: ‘swing’
});
$(‘.navi a’).hover(function() {
$(this).animate({“background” : “#9e2620”}, 1000);
}, function() {
$(this).animate({“background” : “#000000”}, 1000);
});
});
I really don’t understand why the background color won’t change but if for instance I tell it to change the width, it will work fine. Anyone see something I don’t?
