# Rollover background positioning

**URL:** <https://forum.kirupa.com/t/rollover-background-positioning/315501>\
**Category:** web dev\
**Created:** [October 27, 2010, 8:18pm UTC](https://forum.kirupa.com/t/rollover-background-positioning/315501 "2010-10-27T20:18:07Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![neys](https://avatars.discourse-cdn.com/v4/letter/n/74df32/32.png) [@neys](https://forum.kirupa.com/u/neys)\
**Post date:** [October 27, 2010, 8:18pm UTC](https://forum.kirupa.com/t/rollover-background-positioning/315501/1 "2010-10-27T20:18:07Z")

</div>

Hey guys and thank you for reading 🙂

Here’s my problem:

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

[http://grobowski.neys.dk/](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:

```auto
$(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 🙂