Simple jQuery rollover killin me !!

I have a simple rollover that I can't seem to get right.
I need to change the background image of a child object.

here's the html/php:
<div id="menuBoxContent" alt="navigation">
					<?php
						//get list of available icons from database
						$iconTitles=array('txt2Wait','txtLocate','txtPowerWords','txtWow','txtBlast','txtRealEstate','txtWeb','txtAppoints','txt2Way','txtVcard');
						for($i=1;$i<count($iconTitles);$i++){
							if($i%8==0){ echo "<div id=\"menuOptionRow\">"; }
					?>  <div id="menuOption" alt="parent">
								<center>
								<div id="menuOptionIcon" alt="icon"></div>
								<div id="menuOptionTitle"><?php echo $iconTitle;?></div>
							</div>
					<?php if($i%8==0){ echo "</div>"; }} ?>
				</div>

Open in new window


here's the jQuery:
<script type="text/javascript">

//Menuoption rollover
$("div#menuOption").mouseover(function(){
	$(this).addClass('iconShadow');
	$(this).css('border-color','#999');
	$(this.children("#menuOptionIcon")).css('background-image','url("images/icons/txtRest50.on.png")');
});
$("div#menuOption").mouseout(function(){
	$(this).removeClass('iconShadow');
	$(this).css('border-color','#C1C2C4');
	$(this.children('#menuOptionIcon')).css('background-image','url("images/icons/txtRest50.off.png")');
});

</script>

Open in new window


I have to use the $(this) selector bc there could be many iterations of the div 'menuOption'.

When someone rolls over the div 'menuOption', I need to change the background image of the child object 'menuOptionIcon'

I just cant seem to figure out the proper use of the .children() method ..

TIA Experts !!
LVL 1
ImaginxAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

EyalCommented:
why not doing it with CSS

div#menuOption:hover{border-color:#999;}
div#menuOption:hover #menuOptionIcon{background-image:#999;url("images/icons/txtRest50.on.png")}

Open in new window

0
mcnuteCommented:
I have to use the $(this) selector bc there could be many iterations of the div 'menuOption'.
you should avoid to pass an id to more than one DOM Element in your HTML, pass a class instead.

The proper way to use the children method is like this:
$(this).children("#menuOptionIcon").css('background-image','url("images/icons/txtRest50.on.png")');

But like this you are calling the children of the menuOptionIcon Element. What you want to do is to call the children of the menuOption Element, so try like this:
$("#menuOptionIcon", this).css('background-image','url("images/icons/txtRest50.on.png")');

Hope this could help.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
ImaginxAuthor Commented:
Perfect solution Mcnute ... Thanks .. I'm still new to jQuery - but I understand your solution.
Thank you for the great explanation.

Merry Christmas btw !!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.