Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jun 2009
    Posts
    68
    Thanks
    22
    Thanked 0 Times in 0 Posts

    Hover change colour for div?

    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

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Code:
    .col .box1Hover { background: url(red.jpg) no-repeat; }
    should be:

    Code:
    .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.

  • #3
    New Coder
    Join Date
    Jun 2009
    Posts
    68
    Thanks
    22
    Thanked 0 Times in 0 Posts
    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

  • #4
    Regular Coder
    Join Date
    Aug 2011
    Location
    U.S.A.
    Posts
    233
    Thanks
    2
    Thanked 48 Times in 48 Posts
    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:

    Code:
    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.
    WordPress Designer and theme developer. KlongDesigns - helping bloggers and non-technical folks claim their space on the internet.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •