We help IT Professionals succeed at work.

jQuery - change background image on hover for closest class

sabecs
sabecs asked
on
I need to work out how to change the      
background-image: url(/images/test_button_rhs.png);
to
background-image: url(/images/test_button_rhs_ovr.png);
in .button_rhs when class='main_menu' next to it is hovered.

I am pretty sure this can be done with jQuery but I don't know how to do it.

Any help would be apprecited.
<html>
<head>
<title>Test</title>
<style type="text/css"> 
 
a.main_menu, a.main_menu:visited, div.main_menu{
	display: block;
	height: 40px;
	line-height: 35px;
	color: #666;
	width: auto;
	text-align: left;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	font-weight: normal;
	text-decoration: none;
	padding-left: 15px;
	padding-right: 0px;
	background-image: url(/images/test_button.png);
	background-repeat: repeat-x;
	margin-right: 20px;

}

a.main_menu:hover{
	background-image: url(/images/test_button_ovr.png);
	background-repeat: repeat-x;
	color: #000;
}

.button_rhs{
	display: block;
    position:relative;
    top:-40px;
    float:right;
	height: 40px;
	width:20px;
	background-image: url(/images/test_button_rhs.png);
    margin-bottom:-40px;
}

</style>

</head>
<body>       


<table>
<tr>
        <td>
        <div  id='menu_parent1'><a class='main_menu' href='#'>Home Page</a><div class="button_rhs"></div></div> 
        </td>
        <td>
        <div id='menu_parent2'><a class='main_menu' href='#'>Our Strategic Partners</a><div class="button_rhs"></div></div> 
        </td>
        <td><div id='menu_parent3'><a class='main_menu' href='#'>Forms & Documents</a><div class="button_rhs"></div></div> 
        </td>
        <td>
        <div id='menu_parent4'><a class='main_menu' href=''>Contact Us</a><div class="button_rhs"></div></div> 
</td>
</tr>
</table>
</body>

Open in new window

test_buttontest_button_ovr
test_button_ovr_rhs
test_button_rhs
Comment
Watch Question

Lead Developer
Commented:
There was a little bit of a file name issue, however consider this (again, check the image names against the css and js)

<html>
<head>
<title>Test</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
	$(".main_menu").hover(
	  function () {
		$(this).parent().find('.button_rhs').css('background-image','url(images/test_button_ovr_rhs.png)');
	  }, 
	  function () {
		$(this).parent().find('.button_rhs').css('background-image','url(images/test_button_rhs.png)');
	  }
	);
});
</script>
<style type="text/css">
a.main_menu, a.main_menu:visited, div.main_menu {
	display: block;
	height: 40px;
	line-height: 35px;
	color: #666;
	width: auto;
	text-align: left;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	font-weight: normal;
	text-decoration: none;
	padding-left: 15px;
	padding-right: 0px;
	background-image: url(images/test_button.png);
	background-repeat: repeat-x;
	margin-right: 20px;
}
a.main_menu:hover {
	background-image: url(images/test_button_ovr.png);
	background-repeat: repeat-x;
	color: #000;
}
.button_rhs {
	display: block;
	position:relative;
	top:-40px;
	float:right;
	height: 40px;
	width:20px;
	background-image: url(images/test_button_rhs.png);
	margin-bottom:-40px;
}
</style>
</head>
<body>
<table>
  <tr>
    <td><div id='menu_parent1'><a class='main_menu' href='#'>Home Page</a>
        <div class="button_rhs"></div>
      </div></td>
    <td><div id='menu_parent2'><a class='main_menu' href='#'>Our Strategic Partners</a>
        <div class="button_rhs"></div>
      </div></td>
    <td><div id='menu_parent3'><a class='main_menu' href='#'>Forms & Documents</a>
        <div class="button_rhs"></div>
      </div></td>
    <td><div id='menu_parent4'><a class='main_menu' href=''>Contact Us</a>
        <div class="button_rhs"></div>
      </div></td>
  </tr>
</table>
</body>

Open in new window

Author

Commented:
Thanks galexander07, that perfect.

Explore More ContentExplore courses, solutions, and other research materials related to this topic.