Rollover background positioning

programming web dev
1

Hey guys and thank you for reading :slight_smile:

Here’s my problem:

I’m making a new website for a friend which you can find here:

http://grobowski.neys.dk/

As you can see on the indexfile when you mouseover the “Liv i Børnehøjde” buttons a yellow background goes up and goes down again when you mouseout. So far so good.

Now for those of you unfamiliar with the language on the website, it’s Danish and the “Liv i Børnehøjde” buttons are right now just placeholders for news items.

The problem:
I’d like the first news item (the little guy with the gun) to always have a yellow background except when I mouse over one of the other newsitems. Then it should go white. And ofcourse return to yellow if I mouse out on the other newsitem(s) again.

Hope you get what I’m trying to do, if not, please say so and I’ll try to explain it in another way.

Here’s the javascript code that’s on the site right now, changing the button-backgrounds:

$(function(){
	$(".box .boxtext")
		.css( {backgroundPosition: "0 0"} )
		.mouseover(function(){
			$(this).stop().animate({backgroundPosition:"(0 -475px)"}, {duration:300})
		})
		.mouseout(function(){
			$(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:300})
		})
});

Thank you for your time :slight_smile: