PDA

View Full Version : Hover change colour for div?



nickburrett
11-16-2011, 11:28 AM
Hello

I have three areas on my website which change colour when you hover over them and the whole area is a clickable link rather than just the elements inside the area.

You can see what I mean by visiting www.discos.co.uk and hovering over Wedding DJ Hire or Wedding Venue Hire or Contact Us.

I don't know what I'm doing wrong but I cannot achieve this on another website I'm working on at www.somersetdiscos.co.uk.

Can anyone help?
Nick

SB65
11-16-2011, 11:31 AM
.col .box1Hover { background: url(red.jpg) no-repeat; }

should be:


.col .box1:hover { background: url(red.jpg) no-repeat; }

Your css will only apply to an element that has class .box1Hover - you need to use the pseudo-class :hover instead.

nickburrett
11-16-2011, 11:55 AM
Thanks for your reply.

Can you explain why the CSS I have used works on my old website but not my new one?

Cheers
Nick

resdog
11-16-2011, 01:23 PM
Yes, because your old is using jquery to assign a class 'box1Hover' to your div when you hover over it, but your new site has no script on it. The script in question on the first site is located in /js/common.js:



jQuery(function(){
..

/*---begin box1---*/
jQuery(".box1").hover(
function(){
jQuery(this).addClass('box1Hover');
},
function(){
jQuery(this).removeClass('box1Hover');
}
);
/*---end box1---*/
})



You need to call to jquery and to that function for the hover to work as you want it to.