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?
 
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
 
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
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.