Using jQuery to hide image within div that was moused over

Brad Bansner
Brad Bansner used Ask the Experts™
on
I want to hide the image within this DIV when moused over, but this doesn't seem to be working. Any suggestions?

Thank you!

$('.midbutton1').hover(function(){
      $(this).next('.midbuttonarrow').hide();
});

<div class="midbutton1">
<img class="midbuttonarrow" src="img/gr_midbutton-gray.png" width="10" height="6" border="0" />
</div>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Ovid BurkeConsultant Instructor

Commented:
Try this:

$('.midbutton1').hover(
	function() {
		//$('img', this).hide();
		$(this).children('img').hide();
	},
	function() {
		//$('img', this).show();
		$(this).children('img').show();
	}
);

Open in new window


The lines that are commented out will also work as an alternative.
Consultant Instructor
Commented:
If you must use the class selector on your image, then this does it:
$('.midbutton1').hover(
	function() {
		$(this).children('.midbuttonarrow').hide();
	},
	function() {
		$(this).children('.midbuttonarrow').show();
	}
);

Open in new window

Brad BansnerWeb Developer

Author

Commented:
Thanks!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial