...

View Full Version : Hover change colour for div?



nickburrett
11-16-2011, 12:28 PM
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, 12:31 PM
.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, 12:55 PM
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, 02: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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum