Changing parent css on child hover

Question

i have look around this forum a lot and can only find the opposite to my question, in other words i am looking to find how to change the parent div's background when the child div is hovered over, i can only find how to change the child div, when the parent is hovered over.

I have 1 parent div with an inner submit button:

<div class="ugd_ele_normal_base">
  <input name="ugd_1" type="submit" class="ugd_ele_normal"/>
</div><!--end ugd_ele_normal_base-->

What i want is for when the submit button is hovered over, the parent css changes background.

I have tried a few things, but nothing seems to work.

Thanks for the help

Answer 1

I would use jQuery & CSS for this:

CSS

.black {
     background-color: #000000;
}

jQuery

$(function() {
   $('.ugd_ele_normal').hover( function(){
      $(this).parent().addClass("black");
   },
   function(){
      $(this).parent().removeClass("black");
   });
});